圣杯布局和雙飛翼布局，你更喜歡那個布局？
作者：前端山頭人
有人說“雙飛翼布局是玉伯大大提出來的，始于淘寶UED”，其效果和圣杯布局一樣，只是它把三欄布局比作一只鳥，中間內(nèi)容部分分為三部分，左翅膀、中間、右翅膀。
作用
首先要解釋一下：無論是圣杯布局還是雙飛翼布局，都是為了實現(xiàn)一個效果：左右固定寬度，中間部分自適應(yīng)。兩者的區(qū)別在于，圣杯布局給中間的 div 設(shè)置 padding-left 和 padding-right;而雙飛翼布局則在中間的 div 內(nèi)部創(chuàng)建子 div 放置內(nèi)容，并在該 div 里用 margin-left 和 margin-right 留出左右寬度。
圣杯布局
HTML 結(jié)構(gòu)如此：
<body>
<header>組成頭部</header>
<section class="container">
<div class="middle">中間部分自適應(yīng)</div>
<div class="left">左邊欄固定寬度</div>
<div class="right">右邊欄不顧寬度</div>
</section>
<footer>組成尾部</footer>
</body>
CSS 樣式如此：
body {
min-width: 700px;
}
header,
footer {
background: grey;
border: 1px solid #333;
text-align: center;
}
.left,
.middle,
.right {
position: relative;
float: left;
min-height: 130px;
}
.container {
padding: 0 220px 0 200px;
overflow: hidden;
}
.middle {
width: 100%;
background: red;
}
.left {
margin-left: -100%;
left: -200px;
width: 200px;
background: green;
}
.right {
margin-left: -220px;
right: -220px;
width: 220px;
background: blue
}
footer {
clear: both;
}
效果如此：
圣杯布局
代碼說明：
- 首先在容器 container 中給予 padding：0 220px 0 200px ，這一步是為了給兩邊固定寬預(yù)留位置。
- 中間(middle)元素設(shè)置 width: 100%，它自然就自適應(yīng)了。
- 設(shè)置左邊(left)元素 position: relative, left: -200px。這樣做是讓它做到左邊的固定位置，做到此時，效果如下 。 圣杯布局接著用margin-left: -100%，讓其回到與中間部分一樣高的位置，這就是圣杯布局的關(guān)鍵margin-left：-100% 。 表示向左移動整個屏幕的距離因為三個元素都加了浮動，所以配合 margin-left: -100% 左邊容器就能與中間部分同高。
- 同理，設(shè)置右邊(right)元素position: relative, right:-220px, margin-left: -220px 注意，這里的 margin-left 是 220px。為什么這個是220px，和它自身寬度一致注意 ，自身 margin-left 為負(fù)時，就往左移動，等它等于自身高度時就“升格”到上一層，當(dāng)它等于 -100% 時，這個 100% 表示的是中間部分的寬度，所以就固定在左邊了。
雙飛翼布局
有人說“雙飛翼布局是玉伯大大提出來的，始于淘寶UED”，其效果和圣杯布局一樣，只是它把三欄布局比作一只鳥，中間內(nèi)容部分分為三部分，左翅膀、中間、右翅膀。其技術(shù)關(guān)鍵在于它還有一層 div。
HTML 結(jié)構(gòu)如此：
<body>
<header>組成頭部</header>
<section class="container">
<div class="main">
<div class="middle">中間部分自適</div>
<div class="left">左邊欄固定寬度</div>
<div class="right">右邊欄固定寬度</div>
</div>
</section>
<footer>組成尾部</footer>
</body>
CSS 結(jié)構(gòu)如此：
body {
min-width: 700px;
}
header,
footer {
background: grey;
border: 1px solid #333;
text-align: center;
}
.left,
.right,
.main {
float: left;
min-height: 130px;
}
.main {
width: 100%;
background: red;
}
.main-inner {
margin: 0 220px 0 200px;
min-height: 130px;
}
.left {
margin-left: -100%;
width: 200px;
background: green;
}
.right {
margin-left: -220px;
width: 220px;
background: blue
}
footer {
clear: both;
}
效果如圣杯布局一致，不重復(fù)展示，它代碼的關(guān)鍵在于先構(gòu)建中間部分展示出，再通過 margin-left 完成浮動流。
思考：為什么會考三欄布局?
以前的布局難點就是三欄布局，而且三欄布局還能引出 BFC，BFC 的作用之一就是自適應(yīng)布局。而現(xiàn)在 flex: 1就能解決自適應(yīng)布局的問題，所以這類考題已經(jīng)不多見了。
總結(jié)
以前一直擔(dān)心考這類破問題，因為完全沒準(zhǔn)備過。除了一次考左邊固定寬，右邊自適應(yīng)外，就沒考過 CSS 布局方面的問題，大概是因為已經(jīng)過時了。
三欄布局兩種解決方法：
- 圣杯布局 浮動 + margin-left + 自身相對定位。
- 雙飛翼布局 浮動 + margin-left + 中間部分再包裹一層。
相同點：浮動 、margin-left
- margin-left: -100% ：左邊上升。
- margin-left: -220px：右邊上升。
線上demo：
- 圣杯布局。
- 雙飛翼布局。
參考資料
- CSS 布局，float+margin負(fù)值實現(xiàn)圣杯布局
- CSS布局 -- 圣杯布局 & 雙飛翼布局
責(zé)任編輯：武曉燕
來源：
前端山頭人
