什么是圣杯布局、双飞翼布局？

圣杯布局和双飞翼布局解决的问题是一样的，就是两边定宽，中间自适应的三栏布局，中间栏要放在文档流前面以优先渲染。

但是圣杯布局和双飞翼布局在实现方式上有一点差别。

圣杯布局的来历是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;}