三欄布局：頁面分為左中右三部分。左右固定，中間部分自適應。
1. 絕對定位法
這里的絕對定位是指對左右部分進行絕對定位。
HTML結構。
<div class="left">Left</div><div class="main">Main</div><div class="right">Right</div>
代碼。
//簡單的進行CSS resetbody,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空出左右元素所占據的空間.main{ margin:0px 200px 0px 100px; height:100%; background: blue;}// 上述的高度可以不必進行設置，用內容撐開元素高度即可。
height:100%
高度由內容撐開
這種方法有一個弊端，就是如果中間欄含有最小寬度限制，或是含有寬度的內部元素，當瀏覽器寬度小到一定程度，會發生層重疊的情況。
中間欄內嵌一個寬度為200的span元素，發生重疊
2. 圣杯布局
3. 雙飛翼布局
淺談css雙飛翼布局和圣杯布局
4. 自身浮動法
左欄左浮動，右欄右浮動，中間欄放最后
DOM結構
<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的順序，左右兩欄的順序不分先后，但是中間一欄必須放在最后。
優點是代碼足夠簡潔與高效，缺點是中間主體存在克星，即clear:both屬性。如果要使用此方法，需避免明顯的clear樣式，且主要內容無法最先加載，當頁面內容較多時會影響用戶體驗。
5. flex布局
DOM結構
<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結構
<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;}缺點：無法設置欄間距
End
差不多總結了網上的幾種主流方法，有的太小眾的方法就沒有整理。
CSS3的flex教程還是得好好看一看。
然后還有浮動啊定位啊負邊距啊什么的，要深入研究的話估計也是很長的學習筆記。
CSS真是一門玄學。
以上就是本文的全部內容，希望對大家的學習有所幫助，也希望大家多多支持武林網。
新聞熱點
疑難解答
