聖盃和雙飛翼

聖盃佈局和雙飛翼佈局都是實現三欄佈局的方法，左右定寬，中間自適應。與普通的三欄佈局不一樣的是，這兩種方式將main元素放在側邊欄的前面，以達到優先渲染的目，只是實現的方式略有不一樣。 下面以一個左邊欄100px，右邊欄120px的佈局來講明。

通用步驟

HTML部分，用一個容器包裹起來，main在left、right前面：

<div class="container clearfix">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
複製代碼

初始CSS部分，main、left、right所有左浮，main寬度爲100%，清除浮動：

.container {
  border: 1px solid black;
}
/* 清除浮動 */
.clearfix:after {
  content: '';
  display: block;
  clear: both;
}

.main,.left,.right {
  float: left;
}

.main {
  background: #ccc;
  width: 100%;
}

.left {
  background: red;
  width: 100px;
}

.right {
  background: blue;
  width: 120px;
}
複製代碼

此時，main佔據一整行，left、right在第二行並排。接下來要將left和right上移，與main同一行。這裏使用負margin可以實現。

.left {
  background: red;
  width: 100px;
  margin-left: -100%;/* 值爲100%，left會在最左邊 */
}

.right {
  background: blue;
  width: 120px;
  margin-left: -120px;/* 值爲120px，即right的寬度right會在最右邊 */
}
複製代碼

到這一步，三個元素已經並排在一行，可是有一個問題，left、right遮擋了部分main。解決這個問題有兩種方法，分別對應聖盃佈局和雙飛翼佈局。

聖盃佈局

要解決遮擋，不如先"內部縮窄"container，而後再將left、right「推到合適的地方」。這裏要使用相對定位，讓left、right脫離文檔流。

.container {
  border: 1px solid black;
  padding: 0 120px 0 100px;/*給左右padding，數值爲對應左右寬度*/
}
.left {
  background: red;
  width: 100px;
  margin-left: -100%;/* 值爲100%，left會在最左邊 */
  position: relative;/* 相對定位，左移自身寬度 */
  left: -100px;
}

.right {
  background: blue;
  width: 120px;
  margin-left: -120px;/* 值爲120px，即right的寬度right會在最右邊 */
  position: relative;
  right: -120px;/* 相對定位，右移自身寬度 */
}
複製代碼

此時能夠看到，left、right並無遮擋住main。這時還需注意，當main寬度小於left寬度時，佈局將會打亂。建議給container設置一個min-width值。

效果預覽： jsbin.com/gihikon/11/…

雙飛翼佈局

要解決遮擋，也能夠讓main給left、right預留位置，「躲開」側邊欄佔據的空間。不如給main添加一個容器元素wrap，再設置main的margin值避開側邊欄。 更改後的html：

<div class="container clearfix">
    <div class="wrap">
      <div class="main">main</div>
    </div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
複製代碼

/* 容器左浮 */
.wrap,.left,.right {
  float: left;
}

/* 容器寬度100% */
.wrap {
  background: #ccc;
  width: 100%;
}
/* main左右margin分別爲left、right的寬度 */
.main {
  margin-left: 100px;
  margin-right: 120px;
}

.left {
  background: red;
  width: 100px;
  margin-left: -100%;/* 值爲100%，left會在最左邊 */
}

.right {
  background: blue;
  width: 120px;
  margin-left: -120px;/* 值爲120px，即right的寬度right會在最右邊 */
}
複製代碼

此時left、right不須要定位，並且main的寬度爲0也不會影響到佈局，css也更爲簡單。

效果預覽： jsbin.com/fagiyaq/4/e…

額外

都2019年了，還有什麼佈局是flex不能解決的呢？折騰來折騰去圖個啥？

<div class="container">
    <div class="main">main</div>
    <div class="left">left</div>
    <div class="right">right</div>
  </div>
複製代碼

.container {
  border: 1px solid black;
  display: flex;
}

.main {
  background: #ccc;
  flex: 1;
}

.left {
  background: red;
  width: 100px;
  order: -1;
}

.right {
  background: blue;
  width: 120px;
}
複製代碼