雙飛翼佈局和聖盃佈局

原文鏈接：http://www.3mooc.com/front/articleinfo/89

聖盃佈局與雙飛翼佈局針對的都是三列左右欄固定中間欄邊框自適應的網頁佈局（想象一下聖盃是主體是加上兩個耳朵；鳥兒是身體加上一對翅膀），聖盃佈局是Kevin Cornell在2006年提出的一個佈局模型概念，在國內最早是由淘寶UED的工程師（傳說是玉伯）改進並傳播開來，在中國也有叫法是雙飛翼佈局，它的佈局要求有幾點：

三列布局，中間寬度自適應，兩邊定寬；

中間欄要在瀏覽器中優先展示渲染；

允許任意列的高度最高；

雙飛翼佈局下面我們看看具體的實現方法。

HTML部分：

<section>

<div class="container">

    <div class="main">中間部分</div>

</div>

    <div class="left">左邊</div>

    <div class="right">右邊</div>

</section>

CSS部分：

.left,.right{width: 100px;background-color: red;float: left;height: 200px;}

.left{margin-left: -100%;}

.right{margin-left: -100px;}

.container{width:100%;height: 200px;float: left;background-color: pink;}

.main{background-color: orange;margin: 0 100px;}

聖盃佈局下面我們看看具體的實現方法。

HTML部分：

<section>

<div class="main">中間</div>

<div class="left">左邊</div>

<div class="right">右邊</div>

</section>

CSS部分：

section{padding: 0 100px;}

section div{height: 200px;}

.left,.right{width: 100px;background-color: red;float: left; position: relative; }

.left{margin-left: -100%;left: -100px;}

.right{margin-left: -100px;right: -100px;}

.main{width:100%;float: left;background-color: pink;}