淺談CSS三欄布局的Ｎ種實現(xiàn)
發(fā)布時間：2017-08-18 15:20:22 作者：公子七 
我要評論
我要評論本篇文章主要介紹了淺談CSS三欄布局的Ｎ種實現(xiàn)，小編覺得挺不錯的，現(xiàn)在分享給大家，也給大家做個參考。一起跟隨小編過來看看吧
三欄布局：頁面分為左中右三部分。左右固定，中間部分自適應(yīng)。
1. 絕對定位法
這里的絕對定位是指對左右部分進行絕對定位。
HTML結(jié)構(gòu)。
<div class="left">Left</div> <div class="main">Main</div> <div class="right">Right</div>
代碼。
//簡單的進行CSS reset
body,html{
height:100%;
padding: 0px;
margin:0px;
}
//左右絕對定位
.left,.right{
position: absolute;
top:0px;
background: red;
height:100%;
}
.left{
left:0;
width:100px;
}
.right{
right:0;
width:200px;
}
//中間使用margin空出左右元素所占據(jù)的空間
.main{
margin:0px 200px 0px 100px;
height:100%;
background: blue;
}
// 上述的高度可以不必進行設(shè)置，用內(nèi)容撐開元素高度即可。
height:100%
高度由內(nèi)容撐開
這種方法有一個弊端，就是如果中間欄含有最小寬度限制，或是含有寬度的內(nèi)部元素，當(dāng)瀏覽器寬度小到一定程度，會發(fā)生層重疊的情況。
中間欄內(nèi)嵌一個寬度為200的span元素，發(fā)生重疊
2. 圣杯布局
3. 雙飛翼布局
4. 自身浮動法
左欄左浮動，右欄右浮動，中間欄放最后
DOM結(jié)構(gòu)
<body>
<div class="left"></div>
<div class="right"></div>
<div class="main"></div>
</body>
樣式
.left {
background: red;
float: left;
width: 150px;
}
.right {
background: red;
float: right;
width: 200px;
}
.main {
background: pink;
margin: 0 200px 0 150px;
}
效果
這種方式需要注意三個div的順序，左右兩欄的順序不分先后，但是中間一欄必須放在最后。
優(yōu)點是代碼足夠簡潔與高效，缺點是中間主體存在克星，即clear:both屬性。如果要使用此方法，需避免明顯的clear樣式，且主要內(nèi)容無法最先加載，當(dāng)頁面內(nèi)容較多時會影響用戶體驗。
5. flex布局
DOM結(jié)構(gòu)
<div class="container">
<div class="left">Left</div>
<div class="main">Main</div>
<div class="right">Right</div>
</div>
樣式
.container {
display: flex;
}
.main {
flex-grow: 1;
height: 300px;
background-color: red;
}
.left {
order: -1;
flex: 0 1 200px;
margin-right: 20px;
height: 300px;
background-color: blue;
}
.right {
flex: 0 1 100px;
margin-left: 20px;
height: 300px;
background-color: green;
}
效果
6. table布局
DOM結(jié)構(gòu)
<div class="container">
<div class="left"></div>
<div class="main"></div>
<div class="right"></div>
</div>
樣式
.container {
display: table;
width: 100%;
}
.left, .main, .right {
display: table-cell;
}
.left {
width: 200px;
height: 300px;
background-color: red;
}
.main {
background-color: blue;
}
.right {
width: 100px;
height: 300px;
background-color: green;
}
缺點：無法設(shè)置欄間距
End
差不多總結(jié)了網(wǎng)上的幾種主流方法，有的太小眾的方法就沒有整理。
CSS3的flex教程還是得好好看一看。
然后還有浮動啊定位啊負邊距啊什么的，要深入研究的話估計也是很長的學(xué)習(xí)筆記。
CSS真是一門玄學(xué)。
以上就是本文的全部內(nèi)容，希望對大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。
相關(guān)文章
這篇文章主要介紹了CSS經(jīng)典三欄布局方案（6種方法）的相關(guān)資料,詳細的介紹了6種三欄布局的方法，具有一定的參考價值，有興趣的可以了解一下2017-12-01- 可能有人不理解三欄布局是什么，其實三欄布局頁面分為左中右三部分，然后對中間一部分做自適應(yīng)的一種布局方式，下面這篇文章就給大家詳細介紹了CSS實現(xiàn)三欄布局的四種方法2017-01-24
CSS三欄布局探討——中間固定寬度兩邊自適應(yīng)寬度
下面和大家一起探討和學(xué)習(xí)了一種用div+css進行的三列（三欄）布局，而且是中間固定左右兩邊自適應(yīng)寬度，聽起來蠻有意思的。因為以前只是碰到過，左右兩列固定而中間自適應(yīng)2013-12-13- 這篇文章就是總結(jié)一下怎樣使用CSS中的float屬性進行布局，其實網(wǎng)上有很多討論這個話題的文章了，但我覺得都沒說到點子上。那就來老生常談一次吧，CSS之Float布局2013-07-22
- DIV+CSS 三欄布局實例代碼，主要是用了position:absolute2012-06-14
三欄布局在實際的開發(fā)十分常見，比如淘寶網(wǎng)的首頁，即左邊商品導(dǎo)航和右邊導(dǎo)航固定寬度，中間的主要內(nèi)容隨瀏覽器寬度自適應(yīng)，具有一定的參考價值，感興趣的小伙伴們可以參考2018-09-29
