實現：

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

一、浮動布局+margin實現

.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的位置

缺點：

（1）內容展示順序與DOM結構不一致。

（2）當元素縮小到不足以顯示三欄時，右側欄會被擠到下方。

?

二、絕對定位布局+margin（支持內容優先加載）

思路：容器設置為相對定位，左右欄使用絕對定位，中間欄增加左右邊距實現自適應。

?

.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>

缺點：

（1）父元素必須要定位

（2）元素縮小到無法顯示主體內容時，主體內容會被覆蓋無法顯示。

優點：內容可以優先加載

三、Flex布局

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

缺點：無法兼容低版本的瀏覽器

四、表格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; }

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

思路：通過將左右兩欄掛在容器的兩側，從而實現三欄布局，形狀類似圣杯。

樣式設置：

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

（2）三個元素均設置浮動；

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

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

（5）左右盒子相對定位。

.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>

缺點：當中間欄寬度比左欄寬度小時，布局會發生混亂。

優點：支持內容優先加載

六、雙飛翼布局（支持內容優先加載）

思路：基于圣杯布局，引入一個容器來放置中間欄，并且設置中間欄的外邊距，不需要使用相對布局。

.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>

缺點:DOM結構較復雜

優點：支持內容優先加載，寬度縮小，布局不會發生混亂。

?

圣杯布局和雙飛翼布局的區別：

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

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

不同之處在于解決“中間內容不被遮擋”的問題：

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

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

?

轉載于:https://www.cnblogs.com/xiaoan0705/p/11206066.html

總結

以上是生活随笔為你收集整理的CSS三栏布局的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。