# 什么是双飞翼布局?实现原理?

  • 双飞翼布局:对圣杯布局(使用相对定位,对以后布局有局限性)的改进,消除相对定位布局
  • 原理:主体元素上设置左右边距,预留两翼位置。左右两栏使用浮动和负边距归位,消除相对定位。
.container {
  /*padding-left:150px;*/
  /*padding-right:190px;*/
}
.main-wrap {
  width: 100%;
  float: left;
}
.main {
  margin-left: 150px;
  margin-right: 190px;
}
.left {
  float: left;
  width: 150px;
  margin-left: -100%;
  /*position: relative;*/
  /*left:-150px;*/
}
.right {
  float: left;
  width: 190px;
  margin-left: -190px;
  /*position:relative;*/
  /*right:-190px;*/
}

# 双飞翼布局

原理:主体元素上设置左右边距,预留两翼位置。左右两栏使用浮动和负边距归位。

左翅 left 有 200px,右翅 right..220px.. 身体 main 自适应未知

1.html 代码中,main 要放最前边,left right

2.将 main left right 都 float:left

3.将 main 占满 width:100%

4.此时 main 占满了,所以要把 left 拉到最左边,使用 margin-left:-100% 同理 right 使用 margin-left:-220px

(这时可以直接继续上边圣杯布局的步骤,也可以有所改动)

5.main 内容被覆盖了吧,除了使用外围的 padding,还可以考虑使用 margin。

给 main 增加一个内层 div-- main-inner, 然后 margin:0 220px 0 200px

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <meta http-equiv="X-UA-Compatible" content="ie=edge" />
    <title>双飞翼布局</title>
    <style>
      .left,
      .right,
      .main {
        min-height: 200px;
      }
      .left {
        width: 200px;
        background-color: thistle;
      }
      .main {
        background: #999;
      }
      .right {
        width: 300px;
        background-color: violet;
      }
      /* 双飞翼布局重点 */
      .left,
      .main,
      .right {
        float: left;
      }
      .main {
        width: 100%;
      }
      .main-inner {
        margin-left: 200px;
        margin-right: 300px;
      }
      .left {
        margin-left: -100%;
      }
      .right {
        margin-left: -300px;
      }
    </style>
  </head>
  <body>
    <div class="main"><div class="main-inner">中心区</div></div>
    <div class="left">left</div>
    <div class="right">right</div>
  </body>
</html>