昨天面試的時候被問到圣杯布局蚌成，之前知道怎么實現(xiàn)三欄布局诚镰，但是突然問到圣杯布局，當(dāng)時我就憑著感覺說了兩種方法，因為之前自己沒有實現(xiàn)過蠕嫁，面試完之后趕緊寫了demo來驗證一下涯捻。
圣杯布局是什么
- 三列布局鳄炉，中間寬度自適應(yīng)阐虚，兩邊定寬；
- 中間欄要在瀏覽器中優(yōu)先展示渲染启摄；
是不是比三欄布局多了點要求呢稿壁，嘿嘿
實現(xiàn)
HTML代碼如下：
<div id="container">
<div id="middle">middle</div>
<div id="left">left</div>
<div id="right">right</div>
</div>
實現(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īng)
那么想讓中間盒子自適應(yīng)帽驯，就給我們的父元素加padding值：
#container {
padding: 0 100px;
}
此時的效果為：
與上面的圖相比，兩邊多了空书闸，那么此時我的
middle還是沒有出現(xiàn)尼变，所以說明我的左右兩列還是壓著中間那列的，所以我們就應(yīng)該將左右兩列給加定位浆劲，然后讓他們分別向左右移動：
#left {
position: relative;
left: -100px;
}
#right {
position: relative;
right: -100px;
}
此時我們的圣杯布局就完成啦：
實現(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的意思*/
}
那么我們的圣杯布局也就完成啦：
