CSS經(jīng)典三欄布局方案（6種方法）
我要評(píng)論本文介紹了CSS經(jīng)典三欄布局方案，分享給大家，也給自己做個(gè)筆記，具體如下：
三欄布局，顧名思義就是兩邊固定，中間自適應(yīng)。三欄布局在開(kāi)發(fā)十分常見(jiàn)
1. float布局
最簡(jiǎn)單的三欄布局就是利用float進(jìn)行布局。首先來(lái)繪制左、右欄：
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
</style>
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
此時(shí)可以得到左右兩欄分布：
接下來(lái)再來(lái)看中間欄如何處理。我們知道對(duì)于float元素，其會(huì)脫離文檔流，其他盒子也會(huì)無(wú)視這個(gè)元素。（但其他盒子內(nèi)的文本依然會(huì)為這個(gè)元素讓出位置，環(huán)繞在周圍。）所以此時(shí)只需在container容器內(nèi)添加一個(gè)正常的div，其會(huì)無(wú)視left和right，撐滿整個(gè)container，只需再加上margin為left right流出空間即可：
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
margin-left: 120px;
margin-right: 120px;
}
.container {
border: 1px solid black;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
優(yōu)勢(shì)：簡(jiǎn)單
劣勢(shì)：中間部分最后加載，內(nèi)容較多時(shí)影響體驗(yàn)
2. BFC 規(guī)則
BFC(塊格式化上下文)規(guī)則規(guī)定：BFC不會(huì)和浮動(dòng)元素重疊。所以如果將main元素設(shè)定為BFC元素即可：
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: right;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
background-color: green;
height: 200px;
overflow: hidden;
}
<div class="container">
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</div>
3. 圣杯布局
圣杯布局的核心是左、中、右三欄都通過(guò)float進(jìn)行浮動(dòng)，然后通過(guò)負(fù)值margin進(jìn)行調(diào)整。
第一步，先來(lái)看下基本布局
<style>
.left {
float: left;
width: 100px;
height: 200px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
background-color: yellow;
}
.main {
float: left;
width: 100%;
height: 200px;
background-color: blue;
}
</style>
<body>
<div class="container">
<div class="main"></div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
此時(shí)看到的效果是：左、右兩欄被擠到第二行。這是因?yàn)閙ain的寬度為100%。接下來(lái)我們通過(guò)調(diào)整左、右兩欄的margin來(lái)將左、中、右放在一行中：
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
background-color: yellow;
}
第二步，將left的margin-left設(shè)置為-100%，此時(shí)左欄會(huì)移動(dòng)到第一行的首部。然后再將right的margin-left設(shè)置為其寬度的負(fù)值：-100px，則右欄也會(huì)移動(dòng)到和左、中欄一行中：
不過(guò)此時(shí)還沒(méi)有大功告成，我們?cè)囍趍ain中加入一些文字：
<body>
<div class="container">
<div class="main">fjlskdjflkasjdfljasdljlsjdljsdjflksadj</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
可以看到文字被壓住了，接下來(lái)就要解決這個(gè)問(wèn)題。
第三步，給container一個(gè)padding，該padding應(yīng)該正好等于左、右欄的寬度：
.container {
padding-left: 100px;
padding-right: 100px;
}
此時(shí)看到的結(jié)果是左、中、右三欄都整體收縮了，但文字依然被壓住了。
第四步，給左、右兩欄加上相對(duì)布局，然后再通過(guò)設(shè)置left和right值向外移動(dòng)：
.left {
float: left;
width: 100px;
height: 200px;
margin-left: -100%;
position: relative;
left: -100px;
background-color: red;
}
.right {
float: left;
width: 100px;
height: 200px;
margin-left: -100px;
position: relative;
right: -100px;
background-color: yellow;
}
到此為止，大功告成：
4. 雙飛翼布局
雙飛翼布局的前兩步和圣杯布局一樣，只是處理中間欄部分內(nèi)容被遮擋問(wèn)題的解決方案有所不同：
既然main部分的內(nèi)容會(huì)被遮擋，那么就在main內(nèi)部再加一個(gè)content，通過(guò)設(shè)置其margin來(lái)避開(kāi)遮擋，問(wèn)題也就可以解決了：
<!DOCTYPE html>
<html lang="en">
<head>
<style>
.main {
float: left;
width: 100%;
}
.content {
height: 200px;
margin-left: 110px;
margin-right: 220px;
background-color: green;
}
.main::after {
display: block;
content: '';
font-size: 0;
height: 0;
clear: both;
zoom: 1;
}
.left {
float: left;
height: 200px;
width: 100px;
margin-left: -100%;
background-color: red;
}
.right {
width: 200px;
height: 200px;
float: left;
margin-left: -200px;
background-color: blue;
}
</style>
</head>
<body>
<div class="main">
<div class="content"></div>
</div>
<div class="left"></div>
<div class="right"></div>
</body>
</html>
唯一需要注意的是，需要在main后面加一個(gè)元素來(lái)清除浮動(dòng)。
5. flex布局
flex布局是趨勢(shì)，利用flex實(shí)現(xiàn)三欄布局也很簡(jiǎn)單，不過(guò)需要注意瀏覽器兼容性：
<style type="text/css">
.container {
display: flex;
flex-direction: row;
}
.middle {
height: 200px;
background-color: red;
flex-grow: 1;
}
.left {
height: 200px;
order: -1;
margin-right: 20px;
background-color: yellow;
flex: 0 1 200px;
}
.right {
height: 200px;
margin-left: 20px;
background-color: green;
flex: 0 1 200px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
有幾點(diǎn)需要注意一下：
- main要首先加載就必須寫在第一位，但因?yàn)閘eft需要顯示在最左側(cè)，所以需要設(shè)置left的order為-1
- flex屬性的完整寫法是：flex: flex-grow flex-shrink flex-basis 。這也是flex實(shí)現(xiàn)三欄布局的核心，main設(shè)置flex-grow為1，說(shuō)明多余空間全部給main，而空間不夠時(shí)，僅縮小left right部分，同時(shí)因?yàn)橹付薼eft right部分的flex-basis，所以指定了兩者的寬度，保證其顯示效果
6. 絕對(duì)定位
絕對(duì)定位的方式也比較簡(jiǎn)單，而且可以優(yōu)先加載主體：
<style type="text/css">
.container {
}
.middle {
position: absolute;
left: 200px;
right: 200px;
height: 300px;
background-color: yellow;
}
.left {
position: absolute;
left: 0px;
width: 200px;
height: 300px;
background-color: red;
}
.right {
position: absolute;
right: 0px;
width: 200px;
background-color: green;
height: 300px;
}
</style>
</head>
<body>
<div class="container">
<div class="middle">fsdfjksdjflkasjdkfjsdkljfklsjadfkljaksdljfskljffjksldfjldsfdskjflsdjfkljsdlfjsldjfklsjdkflj</div>
<div class="left"></div>
<div class="right"></div>
</div>
</body>
以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
本篇文章主要介紹了淺談CSS三欄布局的Ｎ種實(shí)現(xiàn)，小編覺(jué)得挺不錯(cuò)的，現(xiàn)在分享給大家，也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2017-08-18- 可能有人不理解三欄布局是什么，其實(shí)三欄布局頁(yè)面分為左中右三部分，然后對(duì)中間一部分做自適應(yīng)的一種布局方式，下面這篇文章就給大家詳細(xì)介紹了CSS實(shí)現(xiàn)三欄布局的四種方法2017-01-24
CSS三欄布局探討——中間固定寬度兩邊自適應(yīng)寬度
下面和大家一起探討和學(xué)習(xí)了一種用div+css進(jìn)行的三列（三欄）布局，而且是中間固定左右兩邊自適應(yīng)寬度，聽(tīng)起來(lái)蠻有意思的。因?yàn)橐郧爸皇桥龅竭^(guò)，左右兩列固定而中間自適應(yīng)2013-12-13- 這篇文章就是總結(jié)一下怎樣使用CSS中的float屬性進(jìn)行布局，其實(shí)網(wǎng)上有很多討論這個(gè)話題的文章了，但我覺(jué)得都沒(méi)說(shuō)到點(diǎn)子上。那就來(lái)老生常談一次吧，CSS之Float布局2013-07-22
- DIV+CSS 三欄布局實(shí)例代碼，主要是用了position:absolute2012-06-14
css實(shí)現(xiàn)三欄布局的幾種方法及優(yōu)缺點(diǎn)
三欄布局在實(shí)際的開(kāi)發(fā)十分常見(jiàn)，比如淘寶網(wǎng)的首頁(yè)，即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考2018-09-29
