圣杯布局的实现
经典三列布局，也叫圣杯布局（Holy Grail of Layouts ），在国内也叫双飞翼布局。它的布局有几点要求：
1、三列布局，两边宽度固定，中间宽度自适应；
2、中间栏要在浏览器中优先展示渲染；
3、允许任意列的高度最高；
4、要求只用一个额外的div标签；
5、要求用最简单的CSS、最少的HACK语句。
实现方式：
首先需要进行三列布局，因为中间栏要优先渲染，所以要写在最前面。假定需要实现的是左侧宽度为200px，右侧宽度为150px，中间自适应宽度。HTML代码如下:
<div id="header">#header</div> <div id="container"> <div id="center" class="column">#center</div> <div id="left" class="column">#left</div> <div id="right" class="column">#right</div> </div> <div id="footer">#footer</div>
只多了一层额外的div，即id=container。它的CSS代码如下：
body { min-width:550px; /*2LC width + RC width*/ } #container { padding-left:200px; /*LC width*/ padding-right:150px; /*RC width*/ } #container .column { height:200px; position:relative; float:left; } #center { background-color:#e9e9e9; width:100%; } #left { background-color:red; width:200px; /*LC width*/ right:200px; /*LC width*/ margin-left:-100%; } #right { background-color:blue; width:150px; margin-right:-150px; } #footer { clear:both; } #header,#footer { background-color: #c9c9c9; } /** IE6 Fix **/ * html #left { left:150px; /* RC width */ }
下面我们来分布观察它的实现逻辑：
第一步：建立框架
先写header、container、footer三个div。
<div id="header">#header</div> <div id="container"></div> <div id="footer">#footer</div>
将container的左右内边距分别设置为200px和150px。此时页面看起来就是这样：
第二步：加入三栏
此时有了基本的框架，可以把三栏塞进去。
<div id="header">#header</div> <div id="container"> <div id="center" class="column">#center</div> <div id="left" class="column">#left</div> <div id="right" class="column">#right</div> </div> <div id="footer">#footer</div>
注意：这里center栏要写在前面，然后依次是左栏和右栏。
接着给每栏添加上合适的宽度，并将它们设置为浮动。同时要清楚footer的浮动，以免它跟上面三栏一起浮动。
#contianer .column { float:left; } #center { width:100%; } #left { width:200px; #right { width:150px; } #footer { float:both; }
注意：这里中间栏的100%宽度是基于它的父容器container的宽度而言的。由于container设置类内边距，因此中间栏向左浮动到碰到container的内边距。 但左右两栏由于排在中间栏的后面，且因为空间不够被挤到了中间栏的下面，此时页面如下图所示：
第三步：把左侧栏放上去
中间栏已经就位，剩下的就是把左右两栏放上去。先让左栏上去。
首先，将左栏的外边距设为-100%（相对父容器container而言），此时左栏负外边距等于中间栏的宽度，这样一来，如果中间栏宽度（即100%对应的宽度）≥左栏宽度（200px），左栏将会向上浮动。这就是为什么开头要将body最小宽度设为550的原因。因为左栏上去后，页面最小宽度=200（左内边距）+100%（中间栏宽度）+150（右内边距）+200（左栏宽度）-100%（左栏负边距）=550px。
左栏上浮，与中间栏交叠在一起，并占据了左边。而右栏由于左栏上浮，自动向前浮动到了原先左栏的位置。此时页面样式如下：
接着我们要用到相对定位的属性（relative），并设置一个与左栏等宽的偏移量：
#container .column{ float:left; position:relative; } #left { width:200px; /* LC width */ margin-left:-100%; right:200px; /* LC width */
}
可以看到，因为所有栏目都是相对定位，左栏设置right属性，使得它相对自己向左偏移了200px。此时页面如下图所示:
第四步：把右栏放上去
最后，我们把右栏放上去。给右栏设置一个与它等宽的负右边距即可，右栏就可以上去到右外边距的位置。
右栏上去后，页面最小宽度=200（左内边距）+100%（中间栏宽度）+150（右内边距）+200（左栏宽度）-100%（左栏负边距）+150（右栏宽度）-150（右栏右负外边距）=550px。
从这里也可以知道，为什么要设置 body的min-width=550px。
#right { width:150px; /* RC width */ margin-right:-150px; /* RC width */ }
此时页面如下：
本文完全参考自：
特此感谢。
