圣杯布局与双飞翼布局

圣杯布局和双飞翼布局是我们日常中常见的两种布局，两种布局基本一致，都是两边定宽，中间自适应的三栏布局。下面就直接上代码：

双飞翼布局：

双飞翼布局是在center的div里插入一个div，通过调整内部div的margin值，实现中间栏自适应。

 <div class="center float">
   <div class="mid">mid</div>
 </div>
 <div class="left float">left</div>
<div class="right float">right</div>

.float{
     float: left;
     height:400px;
   }
   .center{
     width: 100%;
   }
   .mid{
     margin: 0 200px;
     height:400px;
     background: red;
   }
   .left{
     background: orange;
     width: 200px;
     margin-left: -100%;
   }
   .right{
     background: orangered;
     width: 200px;
     margin-left:-200px;
   }

圣杯布局

圣杯布局布局就是把middle放在最前面，最外面div用padding值

<div class="box">
      <div class="middle float">mid</div>
      <div class="left float">left</div>
      <div class="right float">right</div>
  </div>

.box{
      padding: 0 50px 0 100px;
    }
    .float{
      float: left;
    }
    .middle{
      width: 100%;
      height:200px;
      background: red;
    }
    .left{
      width: 100px;
      background: hotpink;
      height:200px;
      margin-left: -100%;
      position: relative;
      right: 100px;
    }
    .right{
      width: 50px;
      height:200px;
      background: indigo;
      margin-right: -50px;
      }