雙飛翼布局和聖杯布局其實結果是一樣的，都是實現三欄布局，中間寬度自適應，兩端寬度固定，只是實現的方法不一樣

聖杯布局

　　三欄是獨立的，利用外層container的padding 以及 兩端的margin以及定位left，right值實現

 <!-- HTML -->

<div class="container">
    <div class="middle">我是位於中間</div>
    <div class="left">左邊</div>
    <div class="right">右邊</
 
div>
</div>

/*CSS*/
    /* 先讓所有的元素浮動 */
    .left,.right,.middle {
      float: left;
      height: 200px;
    }

    /* 中間的寬度100% */
    .middle {
      width: 100%;
      background-color: #9999994f;
    }

    /* 兩邊給一個定寬 可以自己定 */
    .left,.right {
      background-color: #e4d8d6bf;
      width: 200px;
    }

    /*
 
 讓三欄位於同一行 */
    .left {
      margin-left: -100%;
    }
    
    .right {
      margin-left: -200px;/* right的寬度 */
    }

    /* 給兩邊留位置 */
    .container {
      padding: 0 200px;
      text-align: center;
    }
    
    /* 讓兩側與內容區域分開 */
    .left {
      position: relative;
      left: -200px;
    }
    
    .right 
 
{
      position: relative;
      right: -200px;
    }

雙飛翼布局

和聖杯類似但是讓兩側與內容區域分開使用的是middle內的div 的maring值實現

 <!-- HTML -->

<div class="container">
    <div class="middle">
      <div class="outer">
        我是位於中間
      </div>
    </div>
    <div class="left">左邊的</div>
    <div class="right">右邊</div>
  </div>

/*css*/
    /* 先讓所有的元素浮動 */
    
    .left,.right,.middle {
      float: left;
      height: 200px;
    }
    /* 中間的寬度100% */
    
    .middle {
      width: 100%;
      background-color: #9999994f;
    }
    /* 兩邊給一個定寬 可以自己定 */
    
    .left,.right {
      background-color: #e4d8d6bf;
      width: 200px;
    }

    /* 讓三欄位於同一行 */
    .left {
      margin-left: -100%;
    }
    
    .right {
      margin-left: -200px;/* right的寬度 */
    }

    /* 給兩邊留位置 */
    
    .container {
      text-align: center;
    }

    /* 讓兩側與內容區域分開 */
    .outer {
      margin: 0 200px;
    }

末尾講一下flex 其實我覺得這個還是挺好用的

dispaly:flex;

　<div class="container">
    <div class="left">左邊的</div>
    <div class="middle">我是位於中間</div>
    <div class="right">右邊</div>
  </div>

 .container {
      display: flex;
    }
    
    .right,
    .left {
      width: 200px;
      background-color: blue;
      flex: 0 1 200px;
    }
    
    .middle {
      flex: 1;
    }

雙飛翼布局以及聖杯布局