三欄佈局那些事兒

中間寬度自適應，兩邊寬度固定的三欄佈局，是前端頁面開發中極爲常見網站佈局方式。博主認爲，一名合格的前端工程師老是會將之熟記於心。
如下是博主總結的五種三欄佈局的經常使用方法，與你們分享。

正文

---

一、浮動佈局

浮動佈局是一種極易理解，也是初學者首先想到的佈局方式。僅借用CSS的float屬性便可輕鬆實現。
html代碼

<div class="left">Left</div> <div class="right">Right</div> <div class="main">Main</div> <!-- 注意其前後順序，main必須在left和right後-->

CSS代碼

.left{ background-color: #ffd0d0; width: 160px; height: 400px; float: left; } .right{ background-color: #a9ffa9; width: 160px; height: 400px; float: right; } .main{ background-color: #ffffa9; height: 500px; width: auto; }

注意html代碼中三欄的前後順序
浮動佈局的優勢是簡單，但也有很多缺點：

1. 主要內容main在文檔後側，因此直到最後才能渲染主要內容。
2. left和right實際上是浮動到了main上面，也就是說，當主欄高度大於側欄高度時（這種狀況極爲常見），main下面的部份內容會和頁面同寬。很少說，下面一張圖賽過千言萬語。

二、絕對定位佈局

僅兩個側欄使用絕對定位，脫離文檔流，始終在頁面的兩邊。而後，爲了不主欄和側欄內容重疊，給主欄設置外邊距，其數值等於側欄寬度。
html代碼

<div class="main">Main</div> <div class="right">Right</div> <div class="left">Left</div>

CSS代碼

.main{ background-color: #ffffa9; height: 500px; width: auto; margin: 0 160px; /* min-width: 200px; */ } .left{ background-color:#ffd0d0; width:160px; height: 400px; position: absolute; top: 0; left: 0; } .right{ background-color: #a9ffa9; width: 160px; height: 400px; position: absolute; top: 0; right: 0; }

用絕對定位佈局思路簡單清晰，但有一個明顯的缺點，就是若是中間欄有最小寬度限制，當瀏覽器 縮小至必定程度時，會出現層疊現象。以下圖

三、聖盃佈局

最爲經典的聖盃佈局，其思路主要是借用浮動分別將左欄和右欄浮動至主欄的兩邊；而後用外層容器的內邊距將主欄兩邊「推」向中間必定寬度，給左欄和右欄騰出空間；最後藉助相對定位 將左欄和右欄定位至合適位置便可。
話很少說，先上代碼：
html代碼

<div class="container"> <div class="main">Main</div> <div class="left">Left</div> <div class="right">Right</div> </div>

CSS代碼

.container{ /*向中間「推」主欄，給兩個側欄 騰地兒*/ padding: 0 160px; } .main{ background-color: #ffffa9; width: 100%; /*主欄寬度設置爲100%，自適應*/ height: 500px; float: left; } .left{ background-color:#ffd0d0; width: 160px; height: 500px; position: relative; float: left; /*左側外邊距爲-100%，也就是主欄的寬度，使.left上浮，且左移至main的左邊*/ margin-left:-100%; /*.left繼續左移，直到屏幕的最左邊，此時.left正好佔據.container左邊padding的160px*/ left: -160px; } .right{ background-color: #a9ffa9; width: 160px; height: 400px; float: right; /*上移至容器最右邊*/ margin-right: -160px; position: relative; }

注意，main（也就是主欄）在最前面，兩個側欄尾隨其後，固然左欄和右欄誰在前誰在後都是能夠的。這樣佈局的好處是：主欄在文檔的前面，因此重要的東西會優先渲染。

四、雙飛翼佈局

雙飛翼佈局是對聖盃佈局的優化，以增長一個div爲代價換取去掉了相對佈局。
「雙飛翼」，顧名思義，是在main外圍增長一個div（.main-outer），而後給.main-outer設置左右內邊距（或者給main設置外邊距，效果相同），像兩個翅膀。兩側欄上浮後恰好位於.main-outer的內邊距處，所以內邊距的值需等於側欄的寬度.
html代碼

<div class="container"> <div class="main-outer"> <div class="main">Main</div> </div> <div class="left">Left</div> <div class="right">Right</div> </div>

CSS代碼

.main-outer{ box-sizing: border-box; padding: 0 160px; width: 100%; float: left; } .main{ background-color: #ffffa9; height: 500px; } .left{ background-color:#ffd0d0; width:160px; height: 400px; float: left; margin-left:-100%; } .right{ background-color: #a9ffa9; width: 160px; height: 400px; float: left; margin-left: -160px; } 

主欄內容一樣在文檔的開頭部分，優先渲染。雙飛翼佈局不需使用相對定位，相對來講更易理解。

五、使用flex佈局

是時候拿出終極武器了，flex佈局。萬能的flex啊，賜我以能量吧！

html代碼

<div class="container"> <div class="left">Left</div> <div class="main">Main</div> <div class="right">Right</div> </div>

CSS代碼

.container{ display: flex; /*如下是默認屬性，不寫也行，爲便於理解，博主在此將其羅列出來 flex-flow: row nowrap; justify-content: flex-start; align-items: flex-start; */ } .main{ background-color: #ffffa9; height: 500px; width:100%; } .left{ background-color:#ffd0d0; width:160px; height: 400px; } .right{ background-color: #a9ffa9; width: 160px; height: 400px; }

上面代碼有一個缺陷，就是在html代碼中，left，main，right的相對位置不能改變，這就致使了main中的主要內容不能被優先渲染。那怎麼辦呢？(≧∀≦)ゞ

萬能的flex固然有辦法咯！
給.mian.left.right三個類中添加以下代碼：

.left{ order: 1; } .main{ order: 2; } .right{ order: 3; }

搞定！***以上五種方法各有優缺點，根據實際狀況挑選適合項目的便可，大的項目的儘可能使用main內容可優先渲染的。