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

简单介绍

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

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

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

三个col都设置

float: left

,为了把left和right定位到左右部分，采用负边距，left部分

margin-left: -100%

，right部分

margin-right: -190px

。



当设置完了之后，虽然左右栏定位成功，但是中间main的内容会被遮盖住。所以在main的父元素container中设置左右padding值。给所有col设置

position: relative

，再分别给左右栏添加left、right值，使他们定位到正确位置。

双飞翼布局

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>

与圣杯布局相比，双飞翼HTML中为main添加了一个子元素main-wrap,这个小小的改动是为了之后处理main中内容被遮盖的问题，这也是两者实现方式最大的不同点，下面继续。

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

与圣杯布局一样，一开始三个col都设置

float: left

,为了把left和right定位到左右部分，采用负边距，left部分

margin-left: -100%

，right部分

margin-right: -190px

。

之后就是处理main中内容的遮盖问题，只需设置main-wrap的左右外边距即可解决。

相比圣杯布局，双飞翼不必设置左右栏的

position: relative

，也不必设置左右left、right值，只需多添加一个子元素包含，相应的padding换成margin。总的说来简单不少。效果图如上，就不再添加了。

双飞翼布局的好处：

主要的内容先加载的优化；

兼容目前所有的主流浏览器，包括IE6在内；

实现不同的布局方式，可以通过调整相关CSS属性即可实现。这里有一个例子