什麼是聖盃佈局、雙飛翼佈局？

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

可是聖盃佈局和雙飛翼佈局在實現方式上有一點差異。

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

聖盃佈局

HTML片斷以下：

<div id="container">
    <div id="main" class="col">
    #main
    </div>
    <div id="left" class="col">
    #left
    </div>
    <div id="right" class="col">
    #right
    </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">
            #main
        </div>
    </div>
    <div id="left" class="col">
    #left
    </div>
    <div id="right" class="col">
    #right
    </div>
</div>

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;}