昨天面試的時候被問到圣杯布局，之前知道怎么實(shí)現(xiàn)三欄布局，但是突然問到圣杯布局，當(dāng)時我就憑著感覺說了兩種方法，因?yàn)橹白约簺]有實(shí)現(xiàn)過，面試完之后趕緊寫了demo來驗(yàn)證一下。
圣杯布局是什么
- 三列布局，中間寬度自適應(yīng)，兩邊定寬；
- 中間欄要在瀏覽器中優(yōu)先展示渲染；
是不是比三欄布局多了點(diǎn)要求呢，嘿嘿
實(shí)現(xiàn)
HTML代碼如下：
<div id="container">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
實(shí)現(xiàn)一：使用浮動
- 先給左右列固定寬度，然后給中間列的寬設(shè)為
100%，都設(shè)置為向左浮動：
#middle {
background-color: lightpink;
height: 300px;
width: 100%;
float: left;
}
#left {
background-color: red;
height: 300px;
width: 100px;
float: left;
}
#right {
background-color: aqua;
height: 300px;
width: 100px;
float: left;
}
此時它的效果為：
- 讓左右列與中間列顯示在一行
給#left設(shè)置margin-left: -100%;，給#right設(shè)置margin-left: -100px;，那么此時我的頁面顯示為：
但是有沒有發(fā)現(xiàn)我的
middle這個字不見了，那是因?yàn)楸粔鹤×耍藭r我的左右列覆蓋到了中間列上面
- 中間盒子自適應(yīng)
那么想讓中間盒子自適應(yīng)，就給我們的父元素加padding值：
#container {
padding: 0 100px;
}
此時的效果為：
與上面的圖相比，兩邊多了空，那么此時我的
middle還是沒有出現(xiàn)，所以說明我的左右兩列還是壓著中間那列的，所以我們就應(yīng)該將左右兩列給加定位，然后讓他們分別向左右移動：
#left {
position: relative;
left: -100px;
}
#right {
position: relative;
right: -100px;
}
此時我們的圣杯布局就完成啦：
實(shí)現(xiàn)二：用flex布局
使用flex布局就簡單多了呢，代碼如下：
#middle {
background-color: lightpink;
height: 300px;
display: flex;
flex:1;/*簡寫，1,1，auto的意思*/
}
#left {
background-color: red;
height: 300px;
flex: 0 0 100px;/*默認(rèn)為橫向的，所以這里的100px相當(dāng)于寬度*/
order:-1;/*設(shè)置left的位置在middle之前*/
}
#right {
background-color: aqua;
height: 300px;
flex: 0 0 100px;/*默認(rèn)為橫向的，所以這里的100px相當(dāng)于寬度*/
}
#container{
display: flex;
flex:1;/*簡寫，1,1，auto的意思*/
}
那么我們的圣杯布局也就完成啦：
