實(shí)現(xiàn)：

高度為100px,左右欄寬度固定為300px，中間欄寬度自適應(yīng)。

一、浮動(dòng)布局+margin實(shí)現(xiàn)

.left,.right,.center{height: 100px; } .left{float: left;width: 300px;background: #ee2c2c; } .right{float: right;width: 300px;background: #EEA236; } .center{margin-left: 300px;margin-right: 300px;background: #008000; }<div class="container"><div class="left"></div><div class="right"></div><div class="center"><p>1.這是布局的中間部分</p><p>2.這是布局的中間部分</p></div></div> //注意center的位置

缺點(diǎn)：

（1）內(nèi)容展示順序與DOM結(jié)構(gòu)不一致。

（2）當(dāng)元素縮小到不足以顯示三欄時(shí)，右側(cè)欄會(huì)被擠到下方。

?

二、絕對(duì)定位布局+margin（支持內(nèi)容優(yōu)先加載）

思路：容器設(shè)置為相對(duì)定位，左右欄使用絕對(duì)定位，中間欄增加左右邊距實(shí)現(xiàn)自適應(yīng)。

?

.container{position: relative; } .left,.right,.center{height: 100px; } .left{position: absolute;left: 0;top: 0;width: 300px;background: #ee2c2c; } .right{position: absolute;right: 0;top: 0;width: 300px;background: #EEA236; } .center{margin-left: 300px;margin-right: 300px;background: #008000; }<div class="container"><div class="left"></div><div class="center"><p>1.這是布局的中間部分</p><p>2.這是布局的中間部分</p></div><div class="right"></div> </div>

缺點(diǎn)：

（1）父元素必須要定位

（2）元素縮小到無(wú)法顯示主體內(nèi)容時(shí)，主體內(nèi)容會(huì)被覆蓋無(wú)法顯示。

優(yōu)點(diǎn)：內(nèi)容可以優(yōu)先加載

三、Flex布局

.container{display: flex; } .left,.right,.center{height: 100px; } .left{ flex: 0 0 300px; //等價(jià)于width:300pxbackground: #ee2c2c; } .right{flex: 0 0 300px; background: #EEA236; } .center{flex: 1 1 auto; //等價(jià)于flex-grow:1background: #008000; }

缺點(diǎn)：無(wú)法兼容低版本的瀏覽器

四、表格table布局

.container{display: table;width: 100%; } .left,.right,.center{height: 100px;display: table-cell; } .left{width: 300px;background: #ee2c2c; } .right{width: 300px;background: #EEA236; } .center{background: #008000; }

五、圣杯布局? （可以使主體部分優(yōu)先加載）

思路：通過(guò)將左右兩欄掛在容器的兩側(cè)，從而實(shí)現(xiàn)三欄布局，形狀類似圣杯。

樣式設(shè)置：

（1）父元素設(shè)置padding-left:左盒子寬，padding-right:右盒子寬；

（2）三個(gè)元素均設(shè)置浮動(dòng)；

（3）中間主體部分定寬width:100%，左右兩邊按要求設(shè)置寬度；

（4）左邊設(shè)置margin-left:-100%,右邊設(shè)置margin-left:-右盒子寬;

（5）左右盒子相對(duì)定位。

.container{overflow: hidden;padding: 0 300px 0 300px; } .left,.right,.center{height: 100px;float: left; } .center{width: 100%;background: #008000; } .left{margin-left: -100%;width: 300px;position: relative;left: -300px;background-color: #ee2c2c; } .right{margin-left: -300px;width: 300px;position: relative;right: -300px;background-color: #EEA236; }<div class="container"><div class="center"><p>1.這是布局的中間部分</p><p>2.這是布局的中間部分</p></div><div class="left"></div><div class="right"></div></div>

缺點(diǎn)：當(dāng)中間欄寬度比左欄寬度小時(shí)，布局會(huì)發(fā)生混亂。

優(yōu)點(diǎn)：支持內(nèi)容優(yōu)先加載

六、雙飛翼布局（支持內(nèi)容優(yōu)先加載）

思路：基于圣杯布局，引入一個(gè)容器來(lái)放置中間欄，并且設(shè)置中間欄的外邊距，不需要使用相對(duì)布局。

.container{overflow: hidden; } .left,.right,.center,.in{height: 100px;float: left; } .center{width: 100%;background: #008000; } .center .in{padding: 0 300px 0 300px; } .left{margin-left: -100%;width: 300px;background-color: #ee2c2c; } .right{margin-left: -300px;width: 300px;background-color: #EEA236; }<div class="container"><div class="center"><div class='in'><p>1.這是布局的中間部分</p><p>2.這是布局的中間部分</p></div></div><div class="left"></div><div class="right"></div></div>

缺點(diǎn):DOM結(jié)構(gòu)較復(fù)雜

優(yōu)點(diǎn)：支持內(nèi)容優(yōu)先加載，寬度縮小，布局不會(huì)發(fā)生混亂。

?

圣杯布局和雙飛翼布局的區(qū)別：

圣杯布局和雙飛翼布局解決方式都是一樣的，就是兩邊定寬，中間自適應(yīng)的三欄布局，中間欄放最最前面優(yōu)先加載。

圣杯布局和雙飛翼布局前面的解決方案是一樣的，即三欄全部設(shè)為float浮動(dòng)，中間欄占滿父元素寬度，左右兩欄加上負(fù)margin讓其跟中間欄div并排，已形成三欄布局。

不同之處在于解決“中間內(nèi)容不被遮擋”的問(wèn)題：

圣杯布局：將父容器設(shè)置了padding-left和padding-right后，將左右兩個(gè)div用relative相對(duì)布局并配合left、right屬性，以便左右兩欄移動(dòng)后不遮擋中間欄；

雙飛翼布局：為中間div內(nèi)部創(chuàng)建一個(gè)容器用于放置內(nèi)容，在該子容器里用padding-left和padding-right為左右兩欄留出位置。

?

轉(zhuǎn)載于:https://www.cnblogs.com/xiaoan0705/p/11206066.html

總結(jié)

以上是生活随笔為你收集整理的CSS三栏布局的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

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