本文總結(jié)了實(shí)現(xiàn)三欄布局的幾種常用方法，效果如下：
image
其中，左右分別為100px，中間自適應(yīng)。
1. 行內(nèi)塊級(jí)元素 —— inline-block
1.1 行內(nèi)塊級(jí)元素 & 負(fù)邊距
html 代碼:
<div class="wrap-inline-3">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代碼:
/*三列布局 -- 行內(nèi)塊級(jí)元素 & 負(fù)邊距*/
.wrap-inline-3 {
font-size: 0;
padding-left: 100px;
padding-right: 200px;
}
.wrap-inline-3 div{
display: inline-block;
vertical-align: top;
height: 20vh;
font-size: 12px;
}
.wrap-inline-3 .left {
width: 100px;
margin-left: -100px;
background-color: aliceblue;
}
.wrap-inline-3 .center {
width: 100%;
background-color: antiquewhite
}
.wrap-inline-3 .right {
width: 200px;
margin-right: -200px;
background-color: aquamarine;
}
特點(diǎn)： 寬度縮到極窄時(shí)，中間部分寬度縮為0，內(nèi)容會(huì)被右側(cè)覆蓋。
1.2 行內(nèi)塊級(jí)元素 & calc 計(jì)算
html 代碼:
<div class="wrap-inline-calc-3">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代碼:
/*三列布局 -- 行內(nèi)塊級(jí)元素 & calc 計(jì)算*/
.wrap-inline-calc-3 {
font-size: 0;
width: 100%;
}
.wrap-inline-calc-3 div{
display: inline-block;
vertical-align: top;
height: 20vh;
font-size: 12px;
}
.wrap-inline-calc-3 .left {
width: 100px;
background-color: aliceblue;
}
.wrap-inline-calc-3 .center {
width: calc(100% - 300px);
background-color: antiquewhite
}
.wrap-inline-calc-3 .right {
width: 200px;
background-color: aquamarine;
}
特點(diǎn)： 寬度縮到極窄時(shí)，中間部分寬度縮為0，內(nèi)容仍會(huì)顯示，右側(cè)會(huì)被擠到下方。
2. 絕對(duì)定位
html 代碼:
<div class="wrap-absolute">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代碼:
/*三列布局: 絕對(duì)定位*/
.wrap-absolute div{
height: 20vh;
}
.wrap-absolute .left {
width: 100px;
position: absolute;
left: 0;
background-color: aliceblue;
}
.wrap-absolute .center {
position: absolute;
left: 100px;
right: 200px;
background-color: antiquewhite;
}
.wrap-absolute .right {
width: 200px;
position: absolute;
right: 0;
background-color: aquamarine;
}
特點(diǎn)： 寬度變得極窄后，三列會(huì)發(fā)生覆蓋。
3. 浮動(dòng)
3.1 浮動(dòng) + 邊距
html 代碼:
<div class="wrap-float-3">
<div class="left">left</div>
<div class="right">right</div>
<div class="center">center</div>
</div>
css 代碼:
/*三列布局：浮動(dòng) + 邊距*/
.wrap-float-3 div {
height: 20vh;
}
.wrap-float-3 .left {
float: left;
width: 100px;
background-color: aliceblue;
}
.wrap-float-3 .center {
margin: 0 100px 0 100px;
background-color: antiquewhite;
}
.wrap-float-3 .right {
float: right;
width: 200px;
background-color: aquamarine;
}
特點(diǎn)： 寬度縮到極窄，右側(cè)會(huì)被擠到下一行。
3.2 圣杯布局：浮動(dòng) + 負(fù)邊距 + 相對(duì)定位
html 代碼:
<div class="wrap-float-shengbei">
<div class="center">center</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
css 代碼:
/* 圣杯布局: 浮動(dòng) + 負(fù)邊距 + 相對(duì)定位 */
.wrap-float-shengbei {
height: 20vh;
padding-left: 100px;
padding-right: 200px;
}
.wrap-float-shengbei div {
float: left;
height: 20vh;
}
.wrap-float-shengbei .center {
width: 100%;
background-color: antiquewhite;
}
.wrap-float-shengbei .left {
width: 100px;
background-color: aliceblue;
margin-left: -100%;
right: 100px;
position: relative;
}
.wrap-float-shengbei .right {
width: 200px;
margin-right: -200px;
background-color: aquamarine;
}
特點(diǎn)： 瀏覽器優(yōu)先解析和顯示中間部分，但父容器寬度不斷變窄時(shí)，雖然中間部分會(huì)優(yōu)先顯示，但布局會(huì)亂。
3.3 雙飛翼布局: 浮動(dòng) + 負(fù)邊距 + 中間元素包一層父容器
html 代碼:
<div class="wrap-float-shuangfeiyi">
<div class="center-wrap">
<div class="center">center</div>
</div>
<div class="left">left</div>
<div class="right">right</div>
</div>
css 代碼:
/* 雙飛翼布局: 浮動(dòng) + 負(fù)邊距 + 中間元素包一層父容器 */
.wrap-float-shuangfeiyi {
height: 20vh;
}
.wrap-float-shuangfeiyi div {
height: 20vh;
}
.wrap-float-shuangfeiyi .center-wrap {
float: left;
width: 100%;
}
.wrap-float-shuangfeiyi .center-wrap .center {
background-color: antiquewhite;
margin-left: 100px;
margin-right: 200px;
}
.wrap-float-shuangfeiyi .left {
float: left;
width: 100px;
background-color: aliceblue;
margin-left: -100%;
}
.wrap-float-shuangfeiyi .right {
float: left;
width: 200px;
margin-left: -200px;
background-color: aquamarine;
}
特點(diǎn)： 寬度逐漸縮小時(shí)，會(huì)不斷縮小中間元素寬度，直至縮為0，剩余兩列會(huì)發(fā)生覆蓋。
4. 彈性盒模型：flex
html 代碼:
<div class="wrap-flex">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代碼:
/*三列布局: 彈性盒模型*/
.wrap-flex {
display: flex;
}
.wrap-flex div{
height: 20vh;
}
.wrap-flex .left {
width: 100px;
background-color: aliceblue;
}
.wrap-flex .center {
flex: 1;
background-color: antiquewhite;
}
.wrap-flex .right {
width: 200px;
background-color: aquamarine;
}
特點(diǎn)： 寬度變得極窄后，左右兩邊會(huì)自適應(yīng)變窄。
5. 表格：table
html 代碼:
<div class="wrap-table">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代碼:
/*三列布局: 表格*/
.wrap-table {
display: table;
}
.wrap-table div{
height: 20vh;
display: table-cell;
}
.wrap-table .left {
width: 100px;
background-color: aliceblue;
}
.wrap-table .center {
background-color: antiquewhite;
}
.wrap-table .right {
width: 200px;
background-color: aquamarine;
}
特點(diǎn)： 寬度變得極窄后，左右兩邊會(huì)自適應(yīng)變窄。
6. 柵格：grid
html 代碼:
<div class="wrap-grid">
<div class="left">left</div>
<div class="center">center</div>
<div class="right">right</div>
</div>
css 代碼:
/*三列布局: 表格*/
.wrap-grid {
display: grid;
grid-template-columns: 100px auto 100px;
}
.wrap-grid div{
height: 20vh;
display: table-cell;
}
.wrap-grid .left {
background-color: aliceblue;
}
.wrap-grid .center {
background-color: antiquewhite;
}
.wrap-grid .right {
background-color: aquamarine;
}
特點(diǎn)： 不會(huì)變形，寬度只會(huì)縮到保持不變形的最窄，但兼容性不好。
以上幾種方法，calc 、table 、flex 、grid 多少會(huì)有些兼容性問題，使用哪種可在了解清楚兼容性后，具體情況具體分析。
