在 flex 和 grid 佈局出現的今天，我依然聽到有人面試了，聖盃佈局、雙飛翼佈局。

雖然網上一搜一大把，但不自己寫一篇，總覺得是自我學習過程中的一種遺憾，一起致敬經典

聖盃佈局和雙飛翼佈局

在如今的網頁中我們經常可以看到左、中、右三列，其中左右兩列寬度固定，中間寬度自適應的佈局方式，並且讓中間列優先渲染（html 中間欄放到文件流前面）。

如下圖。聖盃佈局和雙飛翼佈局就是這種三列布局的兩種實現方式。

聖盃佈局和雙飛翼佈局的實現都利用了以下兩個技術：

1、float：浮動，利用浮動可以使元素脫離文件流，從而讓塊級元素在同一行排列。

2、負margin：在left 和 top方向上的負margin值可以將元素自身向相應方向位移。

聖盃佈局

html

<main class="main">
  <div class="center">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</main>

css

.main{
  height: 100px;
  width: 100%;
  padding: 0 200px;
  &>div{
    float: left;
    text-align: left;
    font
 
-size: 20px;
  }
}
.center{
  height: 100px;
  width: 100%;
  background-color: palevioletred;
}
.left{
  height: 100px;
  background-color: palegreen;
  width: 200px;
  margin-left: -100%;
  position: relative;
  left: -200px;
}
.right{
  height: 100px;
  background-color: khaki;
  width: 200px;
  margin-left: -200px;
  position: relative;
  left: 200px;
}
 

雙飛翼佈局

html

<main class="main">
  <div class="center">
    <div class="center_content">
      center
    </div>
  </div>
  <div class="left">left</div>
  <div class="right">right</div>
</main>

css

.main{
  height: 100px;
  width: 100%;
  &>div{
    float: left;
    text-align: left;
    font-size: 20px;
  }
}
.center{
  width: 100%;
  .center_content{
    height: 100px;
    margin: 0 200px;
    background-color: palevioletred;
    overflow:auto;
  }
}
.left{
  height: 100px;
  background-color: palegreen;
  width: 200px;
  margin-left: -100%;
}
.right{
  height: 100px;
  background-color: khaki;
  width: 200px;
  margin-left: -200px;
}

區別

這兩種佈局在實現的效果上一樣，其實它們的區別在於，使 center 部分的內容不被 left 和 right 部分給遮擋的處理方式。

1、聖盃佈局是在父容器 main 上加在左右 padding（左右部分的寬度 px），再利用定位調整 left 和 right 的位置。

2、雙飛翼佈局是通過在 center 部分種新增一個 center 子塊（center-content）讓它的左右 margin 等於左右部分的寬度。

最後

在 flex 和 grid 佈局出現的今天實現類似的三列布局已經非常簡單，但是如果考慮到相容性問題的話，基於浮動的這兩種佈局方式還是需要了解的。

對比一下 flex 相同效果佈局

程式碼量明顯少了

html

<main class="main">
  <div class="center">center</div>
  <div class="left">left</div>
  <div class="right">right</div>
</main>

css

.main{
  height: 100px;
  width: 100%;
  display: flex;
  text-align: left;
  font-size: 20px;
}
.center{
  height: 100px;
  flex: 1; /*簡寫，1,1，auto的意思*/
  background-color: palevioletred;
}
.left{
  height: 100px;
  background-color: palegreen;
  width: 200px;
  order: -1; /*設定left的位置在middle之前*/
}
.right{
  height: 100px;
  background-color: khaki;
  width: 200px;
}