圣杯布局和雙飛翼布局是我們?nèi)粘Ｖ谐Ｒ姷膬煞N布局，兩種布局基本一致，都是兩邊定寬，中間自適應的三欄布局。下面就直接上代碼：

雙飛翼布局：

雙飛翼布局是在center的div里插入一個div，通過調(diào)整內(nèi)部div的margin值，實現(xiàn)中間欄自適應。

 <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;
      }