聖盃佈局與雙飛翼佈局

爲了實現三列布局，中間欄優先顯示，內容自適應，開發者提出了聖盃佈局與雙飛翼佈局，我才疏學淺，只是參考網上的資料加以整理到本身的筆記中，雖然已經有不少人整理過,先上效果圖

一，聖盃佈局，來源於In Search of the Holy Grail，先貼上代碼，

<div class="grids-grail">
    <div class="g-main">聖盃佈局</div>
    <div class="g-sub"></div>
    <div class="g-extra"></div>
</div>

聖盃佈局的寫法：

　　1.父元素設置padding-left和padding-right擠出左右兩邊的位置；

　　2.三個塊都左浮動，main塊自適應寬度width: 100%，爲左右兩個塊設置定寬；

　　3.負邊距，要定位到左邊的塊設置margin-left: 100%；定位到右邊的塊設置margin-left: -190px，值大於等於塊的寬度，實現三塊並排；

　　4.左右兩塊設置相對定位relative，設左邊塊right值，右邊塊的left值；

　　5.在IE6下，左邊塊錯位，設置left值。

/* 聖盃佈局 */
.grids-grail { padding-left: 200px;padding-right: 200px;/**/height: 100px;margin-bottom: 20px;background-color: #eee; }
.g-main { float: left;width: 100%;/**/height: 100px;background-color: #7fa; }
.g-sub { float: left;position: relative;right: 200px;margin-left: -100%;width: 190px;/**/height: 100px;background-color: #f7a; }
.g-extra { float: left;position: relative;left: 200px;margin-left: -190px;width: 190px;/**/height: 100px;background-color: #f77; }
/* 兼容IE6 */
*html .g-sub { left: 200px; }

二，雙飛翼佈局，起源於淘寶，淘寶大牛改進了聖盃佈局，一樣爲三塊設置了浮動，去掉了relative屬性，爲main加了一個內容div的嵌套，利用margin來實現

<div class="grids-double">
    <div class="d-main column">
        <div class="main-content">雙飛翼佈局</div>
    </div>
    <div class="d-sub column"></div>
    <div class="d-extra column"></div>
</div>

雙飛翼佈局的寫法：

　　1.一樣爲三塊設置左浮動，main塊設置100%自適應寬度，左右兩塊設置定寬;

　　2.負邊距，爲左側塊設置margin-left: -100%使其定位到左側，爲右邊塊設置margin-left負值，值一樣大於等於塊的寬度，來實現三塊並排;

　　3.爲main塊下的內容塊添加外邊距margin-left和margin-right，大於等於相應塊的寬度，使內容不至於被左右兩側的塊覆蓋;

　　4.當你須要佈局不是鋪滿整個屏幕，則能夠在外面加一層div並設置你要的寬度，併爲.grids-double設置width: 100%。

/* 雙飛翼佈局 */
.grids-wrap { width: 960px;/* wrap層 */ }
.grids-double { width: 100%; }
.d-main { float: left;width: 100%;/**/background-color: #eee; }
.main-content { margin-left: 200px;margin-right: 200px;/**/height: 100px;background-color: #7fa; }
.d-sub { float: left;margin-left: -100%;width: 190px;/**/height: 100px;background-color: #f7a; }
.d-extra { float: left;margin-left: -190px;width: 190px;/**/height: 100px;background-color: #f77; }

雙飛翼佈局多了一個節點，但代碼相對相對簡潔，差別我說不了太深，只是記下方便查閱。知乎上也有二者差別比較的問題，詳情見連接。

三，三列等高佈局寫法：

　　1.三列設置float並排，內邊距，外邊距相抵消，margin-bottom: 10000px;padding-bottom: 10000px;父元素設置overflow:hidden;

　　能夠結合雙飛翼與聖盃佈局