假設(shè)高度已知，請(qǐng)寫出三欄布局，其中左右各位300px，中間自適應(yīng)

1、左右浮動(dòng)

.left {

float: left;

width: 300px;

background: red;

}

.right {

float: right;

width: 300px;

background: green;

}

.center {

background: yellow;

}

這是浮動(dòng)布局

2、絕對(duì)定位

.left-center-right div {

position: absolute;

}

.left {

left: 0;

width: 300px;

background: red;

}

.right {

right: 0;

width: 300px;

background: green;

}

.center {

left: 300px;

right: 300px;

background: yellow;

}

這是絕對(duì)定位

3、flex布局

.left-center-right {

display: flex;

}

.left {

width: 300px;

background: red;

}

.right {

width: 300px;

background: green;

}

.center {

flex: 1;

background: yellow;

}

這是flex布局

4、table布局

.left-center-right {

display: table;

width: 100%;

}

.left-center-right div {

display: table-cell;

}

.left {

width: 300px;

background: red;

}

.right {

width: 300px;

background: green;

}

.center {

background: yellow;

}

這是table布局

5、grid布局

.left-center-right {

display: grid;

width: 100%;

grid-template-rows: 100px;

grid-template-columns: 300px auto 300px;

}

.left {

background: red;

}

.right {

background: green;

}

.center {

background: yellow;

}

這是grid布局

優(yōu)缺點(diǎn)：

浮動(dòng)布局：因?yàn)楦?dòng)布局是脫離文檔流的，在實(shí)際使用的過程中得很好的處理浮動(dòng)(清除浮動(dòng))，如果處理不好會(huì)引發(fā)出一些問題，這是它的缺點(diǎn)；優(yōu)點(diǎn)是兼容性比較好

絕對(duì)定位：優(yōu)點(diǎn)：快捷，不容易出問題；缺點(diǎn)：由于這個(gè)是脫離文檔流的導(dǎo)致后面的子元素也是脫離文檔流的，導(dǎo)致實(shí)用性不太好

flex布局：css3新出的布局方式，兼容性比較好，有效的解決以上兩個(gè)問題

table布局：兼容性好，由于ie8是不兼容flex布局的，這時(shí)候可以使用table布局；缺點(diǎn)：歷史的詬病以外還有就是這三欄布局只要有一欄超出了指定的高度，其他兩欄也會(huì)隨之變高，在某些場景中這是不適用的

grid布局：可以做很多事情，代碼量相對(duì)來說會(huì)比較少

如果去掉高度已知，哪些就不適用了？

效果圖：

總結(jié)

以上是生活随笔為你收集整理的html5+css3网页制作:三栏布局宽度自适应,css三栏布局的五种写法，中间自适应，左右宽度固定...的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。