聖盃佈局和雙飛翼佈局

好激動誒，本身也像模像樣地開了一個博客，技術討論的部分也能夠從個人小松鼠博客上面放到這了。

一直在往一個優秀的前端上努力。

 

今天就說說這個，剛剛糾結了半天，看代碼聖盃佈局和雙飛翼佈局都是三列布局，差很少誒。那到底什麼差異呢。

 

《CSS佈局終極方案之--聖盃佈局（兼容IE6+，現代瀏覽器）》一文中提到了：

經典三列布局，也叫作聖盃佈局【Holy Grail of Layouts】是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最先是由淘寶UED的工程師傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點： 一、三列布局，中間寬度自適應，兩邊定寬； 二、中間欄要在瀏覽器中優先展現渲染； 三、容許任意列的高度最高； 四、要求只用一個額外的DIV標籤； 五、要求用最簡單的CSS、最少的HACK語句；

那這麼說好像就只是本土化的區別了。

《聖盃佈局與雙飛翼佈局的實現思路》一文中把代碼部分實現了一下，其實我以爲就該是同樣的吧，引用網易nec的佈局代碼：

 

<div class="g-bd5 f-cb">
    <div class="g-sd51">
        <p>左側定寬</p>
    </div>
    <div class="g-mn5">
        <div class="g-mn5c">
            <p>中間自適應</p>
        </div>
    </div>
    <div class="g-sd52">
        <p>右側定寬</p>
    </div>
</div>

 

/* 三列中間自適應佈局 */
.g-bd5{margin:0 0 10px;}
.g-sd51,.g-sd52{position:relative;float:left;width:230px;margin:0 -230px 0 0;}
.g-sd52{float:right;width:190px;margin:0 0 0 -190px;}
.g-mn5{float:left;width:100%;}
.g-mn5c{margin:0 200px 0 240px;}

醬紫就是一個獎盃或者飛鳥了。

理解的不對請指正。

慢慢前行ing。