雙飛翼布局與聖杯布局

那麼我們怎麼實現這種三列布局呢，先說一下我們平常的方法。

讓左列left右列right分別左右浮動，然後給主列設置左右外邊距margin-left和margin-right，即可實現主列自適應。

代碼如下：

DOM:

<div class="container"> <div class="left"></div> <div class="right"></div> <div class="main"></div></div>

CSS:

.left{ float: left; height:200px; width: 100px; background-color: #bd4147; } .right{ float: right; height: 200px; width: 200px; background-color: #419641; } .main{ margin-left:120px; margin-right: 220px; height: 200px; background-color: #01549b; }

但是這種方法有一個缺點，就是左列left和右列right必須在主列main的前面，順序不能改變，這就導致主列所顯示的主頁面無法率先載入，影響用戶體驗。

聖杯布局

DOM:

<div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div></div>

聖杯布局的思路是把左列left 右列right 主列main分別浮動，然後用負外邊距給左右兩列進行定位；

CSS如下：

.main{ float: left; width: 100%; height: 200px; background-color: #01549b; } .left{ float: left; height: 200px; width: 100px; margin-left: -100%; background-color: #bd4147; } .right{ float: left; height: 200px; width: 200px; margin-left: -200px; background-color: #419641; }

左右兩列定位了，main還沒有定位，所以會出現左右列覆蓋主列main的情況，這時我們給容器container添加左右內邊距padding-left和padding-right，成功定位主列main

.container{ padding-left: 120px; padding-right: 220px; }

但這時候左右兩列會受容器左右內邊距的影響，所以給他們添加相對定位；

.left{ position: relative; left: -120px; } .right{ position: relative; right: -220px; }

最終代碼如下：

DOM:

<div class="container"> <div class="main"></div> <div class="left"></div> <div class="right"></div></div>

CSS:

.container{ padding-left: 120px; padding-right: 220px; } .main{ float: left; width: 100%; height: 200px; background-color: #01549b; } .left{ position: relative; left: -120px; float: left; height: 200px; width: 100px; margin-left: -100%; background-color: #bd4147; } .right{ position: relative; right: -220px; float: left; height: 200px; width: 200px; margin-left: -200px; background-color: #419641; }

聖杯布局的優點：

• 主列率先載入
• 允許任何列是最高的
• DOM結構簡單

缺點：

• 和雙飛翼布局相比CSS樣式較為複雜

雙飛翼布局

雙飛翼布局源自淘寶UED，第一步和聖杯布局一樣，浮動三列，給左右兩列設置負外邊距；同樣會覆蓋主列main，雙飛翼布局的做法是在主列main後面添加了一個寬度為100%的div，再設置主列main的左右邊距，代碼如下：

DOM：

<div class="wrap"> <div class="main"></div></div> <div class="left"></div> <div class="right"></div>

CSS：

.wrap{ float: left; width: 100%; } .main{ height: 200px; margin-left: 110px; margin-right: 210px; background-color: #01549b; } .left{ float: left; height: 200px; width: 100px; margin-left: -100%; background-color: #bd4147; } .right{ float: left; height: 200px; width: 200px; margin-left: -200px; background-color: #419641; }

優點：

• 率先載入主列main
• 允許任何列是最高的
• CSS樣式簡單

缺點：

• 和聖杯布局相比DOM結構較為複雜

實現三列布局還有很多種方法，比如用時下比較流行的Flex，等等。

這裡只討論雙飛翼和聖杯布局，請大家指正。