聖杯布局以及雙飛燕布局（柵格）

部分轉自：什么是聖杯布局、雙飛翼布局？

聖杯布局和雙飛翼布局解決的問題是一樣的，就是兩邊定寬，中間自適應的三欄布局，中間欄要放在文檔流前面以優先渲染。

但是聖杯布局和雙飛翼布局在實現方式上有一點差別。

聖杯布局的來歷是2006年發在a list part上的這篇文章： 
http://alistapart.com/article/holygrail 
雙飛翼布局介紹-始於淘寶UED： 
http://www.imooc.com/wenda/detail/254035

聖杯布局

1. 三者都設置向左浮動。
2. 設置中間的寬度為100％。
3. 設置負邊距margin-left。左部分設置-100％,.右部分設置-width px。
4. 設置容器的padding值給左右兩部分留出空間。
5. 設置左右部分為相對定位。左部分left的為-width，右部分right為-width。

HTML

<div id="container">
    <!--先寫中間部分-->
    <div id="main" class="col"></div>
    <div id="left" class="col"></div>
    <div id="right" class="col"></div>
</div>

主體main放置在最前面可以優先加載。

CSS

body {min-width: 550px;} 

.col {position: relative;float: left;}

#container {padding: 0 190px 0 190px;}

#main {width: 100%;height: 400px;background-color: #ccc;}

#left {width: 190px;height: 400px;margin-left: -100%;left: -190px;background-color: #0000FF;}

#right {width: 190px;height: 400px;margin-left: -190px;right: -190px;background-color: #FF0000;}

聖杯布局有個問題，當面板的中間部分比兩邊的子面板寬度小的時候，布局就會亂掉。

 

雙飛翼布局

HTML

<div id="container">
    <div id="main" class="col">
        <div id="main-wrap"></div>
    </div>
    <div id="left" class="col"></div>
    <div id="right" class="col"></div>
</div>

 

與聖杯布局相比，雙飛翼HTML中為main添加了一個子元素main-wrap,這個小小的改動是為了之后處理main中內容被遮蓋的問題，這也是兩者實現方式最大的不同點。

CSS

body {min-width: 550px;}
.col {float: left;}

#main {width: 100%;height: 400px;background-color: #ccc;}

#main-wrap {margin: 0 190px 0 190px;}

#left {width: 190px;height: 400px;margin-left: -100%;background-color: #0000FF;}

#right {width: 190px;height: 400px;margin-left: -190px;background-color: #FF0000;}

 

與聖杯布局一樣，一開始三個col都設置float: left,為了把left和right定位到左右部分，采用負邊距，left部分margin-left: -100%，right部分margin-right: -190px。

之后就是處理main中內容的遮蓋問題，只需設置main-wrap的左右外邊距即可解決。

相比聖杯布局，雙飛翼不必設置左右欄的position: relative，也不必設置左右left、right值，只需#main多添加一個子元素包含，相應的padding換成margin。總的說來簡單不少。

 

雙飛翼布局的好處：

1. 主要的內容先加載的優化；
2. 兼容目前所有的主流瀏覽器，包括IE6在內；（就一個針對ie6的清除浮動hack:_zoom: 1;）
3. 實現不同的布局方式，可以通過調整相關CSS屬性即可實現。（可搭配實現一套柵格化布局系統）

什么是柵格化布局：

簡單點說就是：像ps中的參考線一樣，用若干水平參考線和垂直參考線將畫布(網頁)分割成若干份以便於布局排版。當然這個水平參考線和垂直參考線並不是隨便拉的而是有規律的。

標准的柵格化公式

                                      W = c * n + g * (n - 1) + 2 * m

在實際操作過程中，我們會省略掉最左邊和最右邊的那兩個外邊距，也就是說w1的寬度才是總寬度。

                                            w1=(c + g) * n - g

寫模板與是有講究的，為了盡可能減少代碼且發揮代碼最大的公用性，我們可以使用父級控制子級。每次布局結構不同時，我們只修改父級樣式名就可以實現布局變換。

 

 

如果我們要求布局如下：

回到前面的公式中，我們套用下公式可得出：190=(c+10)*n-10，化簡后：200=(c+10)*n此時，c和n是未知的，所以可以有推算出幾種組合(注意：n是正整數！)。

例：c=190,n=1、c=90,n=2、c=40,n=4、c=30,n=5、c=15,n=8等。如果讓c=30，此時父級樣式名為：grid-c2-m0s5，如果讓c=40，此時父級樣式名為：grid-c2-m0s4。

這個要看個人喜好了，如果習慣c=30。有了父級樣式后，我們來改造下css樣式即可實現靈活布局了。

html：

<div class="col grid-c2-m0s1 clearfix">
  <div class="col-main">
    <div class="main-wrap">grid-c2-m0s1</div>
  </div>  
  <div class="col-sub">sub=30</div>
</div>

css：

雙飛翼：

.col-main{float:left;width:100%;height:50px;}
.main-wrap{background:#666;height:100%}
.col-sub{float:left;height:50px;background:#ccc;}

柵格：

/*兩列  左主右側*/
.grid-c2-m0s1{}
.grid-c2-m0s1 .main-wrap{margin-right:40px}
.grid-c2-m0s1 .col-sub{width:30px;margin-left:-30px}

 

 

 

有了這些模板庫后，當我們頁面布局需要變動時直接修改父級class即可實現對應布局