前不久刷文章的時候看到了一篇關於聖杯和雙飛翼的佈局介紹，自己也是去學習了一下，這篇博文也是我為了總結自己學習的知識，嘻嘻。 國外提出的聖杯佈局和阿裡提出的雙飛翼都是為瞭解決三欄佈局，中間內容部分自適應並且最先被渲染，兩邊的寬度固定。這兩種佈局呈現的結果是一樣的，如下圖所示： 下麵將展示代碼公有部分： ...
前不久刷文章的時候看到了一篇關於聖杯和雙飛翼的佈局介紹，自己也是去學習了一下，這篇博文也是我為了總結自己學習的知識，嘻嘻。
國外提出的聖杯佈局和阿裡提出的雙飛翼都是為瞭解決三欄佈局，中間內容部分自適應並且最先被渲染，兩邊的寬度固定。這兩種佈局呈現的結果是一樣的，如下圖所示：
下麵將展示代碼公有部分：
HTML:
<div class="header">header內容</div>
<div class="wrap">
<div class="center">中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer">footer內容</div>CSS:
* {
margin: 0;
padding: 0;
}
.header, .footer {
width: 100%;
font-size: 20px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: #666;
}
.center {
width: 100%;
height: 200px;
background-color: yellow;
}
.left {
width: 200px;
height: 200px;
background-color: red;
}
.right {
width: 150px;
height: 200px;
background-color: blue;
}瀏覽器渲染出來的樣式如下：
現在瀏覽器顯示的結果中並沒有實現wrap部分顯示在一行中。在css中利用margin來實現wrap部分顯示在一行中。
CSS:
/* 此處僅顯示修改了的代碼 */
/*
* 註意： 要清浮動，不然wrap的高度會坍塌
*/
.wrap {
zoom: 1;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.center {
width: 100%;
height: 200px;
background-color: yellow;
float: left;
}
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: -100%; // 是left能夠移到最左邊
}
.right {
width: 150px;
height: 200px;
background-color: blue;
float: left;
margin-left: -150px; // 是left能夠移到最右邊
}
此時怎麼感覺就已經做完了，別急我們將left和right設置opacity來觀察一下center中內容的顯示的情況。
現在可以看到center的內容被left和right給遮擋了。聖杯和雙飛翼不同之處就是在這個問題的解決方法。
聖杯佈局：
為瞭解決上面一個問題，我們的聖杯佈局就先是使用padding來將wrap內容向中間擠。padding設置的值是[padding: 0 rightWidth 0 leftWidth]
增加padding後顯示的結果是：
然後我們使用position：relativeleft和right移動
CSS:
/* 此處僅顯示修改過的代碼 */
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: -100%;
position: relative;
left: -200px;
}
.right {
width: 150px;
height: 200px;
background-color: blue;
float: left;
margin-left: -150px;
position: relative;
left: 150px;
}
這樣就實現了聖杯佈局。但是聖杯佈局存在一個問題，在這裡為了消除演示的其他影響，我們將center的文字去掉，當屏幕可視區域的寬度小於某個最小值（left-width * 2 + right-width）的時候，佈局會被打亂，如下圖：
正是因為聖杯佈局會有這樣的問題，所以阿裡提出了雙飛翼,在介紹雙飛翼之前我們用絕對定位的方式來實現三欄效果。
絕對定位
html代碼和前面的是一樣的
CSS:
* {
margin: 0;
padding: 0;
}
.header, .footer {
width: 100%;
font-size: 20px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: #666;
}
// wrap設置成相對定位
.wrap {
position: relative;
}
.center {
height: 200px;
background-color: yellow;
margin: 0 150px 0 200px; // 對center設置margin使left和right不遮擋center的內容
}
/*
* left和right都使用絕對定位來實現left、right、center顯示在一行
*/
.left {
width: 200px;
height: 200px;
background-color: red;
position: absolute;
top: 0;
left: 0;
}
.right {
width: 150px;
height: 200px;
background-color: blue;
position: absolute;
top: 0;
right: 0;
}這樣實現的效果就和聖杯佈局實現的結果一樣，而且不會有聖杯中的視窗寬度最小值，既然這樣就行了，那為什麼阿裡要提出雙飛翼呢？
絕對定位這種解決方法是解決了聖杯佈局中的問題，但是他又引入了另外一個問題，我們講left中的height設置成height: 300px;
這下就知道絕對定位的方式的問題在哪了，絕對定位是的left和right都脫離了文檔流，left和right的高度不會將wrap的高度撐開。
接下來我們介紹阿裡提出的雙飛翼佈局。
雙飛翼
雙飛翼佈局是通過設置margin來實現的。要實現雙飛翼佈局，HTML的dom結構要改變一點，代碼如下：
HTML:
<div class="header">header內容</div>
<div class="wrap">
<div class="center">
<div class="center-content">中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容中間內容</div>
</div>
<div class="left"></div>
<div class="right"></div>
</div>
<div class="footer">footer內容</div>在這裡我們設置center-content的margin: 0 right-width 0 left-width;，代碼如下：
* {
margin: 0;
padding: 0;
}
.header, .footer {
width: 100%;
font-size: 20px;
line-height: 100px;
text-align: center;
color: #fff;
background-color: #666;
}
.wrap {
zoom: 1;
}
.wrap:after {
content: '';
display: block;
clear: both;
}
.center {
width: 100%;
height: 200px;
background-color: yellow;
float: left;
}
// 對內容設置左右margin值
.center-content {
margin: 0 150px 0 200px;
}
.left {
width: 200px;
height: 200px;
background-color: red;
float: left;
margin-left: -100%;
}
.right {
width: 150px;
height: 200px;
background-color: blue;
float: left;
margin-left: -150px;
}
小段語言組織能力有限，隨筆語句可能太過雜亂，望大家諒解。
上面的內容純屬小段的個人見解，如果有誤，還請指出，感激。^-^
