1、寬度自適應三列布局
三列布局的原理和兩列布局的原理是一樣的，只不過多了一列，只需給寬度自適應兩列布局中間再加一列，然后重新計算三列的寬度，就實現了寬度自適應的三列布局。
同樣的道理，更多列的布局，其實和兩列、三列的布局模式是一樣的。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>三列布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #herder{ 9 height:50px; 10 background:blue; 11 } 12 #main{ 13 width:100%; 14 overflow:hidden; 15 } 16 #main .main-left{ 17 width:25%; 18 height:800px; 19 background:red; 20 float:left; 21 } 22 #main .main-center{ 23 width:50%; 24 height:800px; 25 background:lightgreen; 26 float:left; 27 } 28 #main .main-right{ 29 width:25%; 30 height:800px; 31 background:pink; 32 float:right; 33 } 34 #footer{ 35 height:50px; 36 background:gray; 37 } 38 </style> 39 </head> 40 <body> 41 <div id="herder">頁頭</div> 42 <div id="main"> 43 <div class="main-left">左列</div> 44 <div class="main-center">中間</div> 45 <div class="main-right">右列</div> 46 </div> 47 <div id="footer">頁腳</div> 48 </body> 49 </html>
2、左右兩列固定寬度，中間內容寬度自適應
要想實現左右兩列固定寬度，中間寬度自適應的布局，那么使用浮動就做不到了，使用浮動之后頁面就亂了，必須使用絕對定位來將三列固定在一行。
1 <!DOCTYPE html> 2 <html> 3 <head> 4 <meta charset="UTF-8"> 5 <title>兩邊固定中間自適應布局</title> 6 <style> 7 *{margin:0;padding:0;} 8 #herder{ 9 height:50px; 10 background:blue; 11 } 12 #main{ 13 width:100%; 14 position:relative; 15 } 16 #main .main-left{ 17 width:200px; 18 height:800px; 19 background:red; 20 position:absolute; 21 left:0; 22 top:0; 23 } 24 #main .main-center{ 25 height:800px; 26 background:lightgreen; 27 margin:0 310px 0 210px; 28 } 29 #main .main-right{ 30 width:300px; 31 height:800px; 32 background:pink; 33 position:absolute; 34 right:0; 35 top:0; 36 } 37 #footer{ 38 height:50px; 39 background:gray; 40 } 41 </style> 42 </head> 43 <body> 44 <div id="herder">頁頭</div> 45 <div id="main"> 46 <div class="main-left">左列</div> 47 <div class="main-center">設計網頁的第一步就是設計版面布局，搭建網站結構，網頁排版的合理性，在一定程度上也影響着網站整體的布局以及后期的優化。一個好的網站形象能更容易地吸引用戶、留住用戶。因此，網站首頁第一屏的排版非常重要，很多時候能決定用戶的去與留。</div> 48 <div class="main-right">右列</div> 49 </div> 50 <div id="footer">頁腳</div> 51 </body> 52 </html>