三列-负值margin

结构复杂

by Alex Liu

HTML

<div class="content">
  <div class="main">
    
    利用的是浮动元素 margin 负值的应用。

主体内容可以优先加载，HTML 代码结构稍微复杂点。
  </div>
</div>
<div class="left"></div>
<div class="right"></div>

SCSS

.content {
  float: left;
  width: 100%;
}

.main {
  height: 200px;
  margin-left: 110px;
  margin-right: 220px;
  background-color: green;
}

.left {
  float: left;
  height: 200px;
  width: 100px;
  margin-left: -100%;
  background-color: red;
}

.right {
  width: 200px;
  height: 200px;
  float: right;
  margin-left: -200px;
  background-color: blue;
}