有时觉得看那些国外教程感觉还挺好的，英文不多，大部分都是代码多，了解个思路就好的了。然而最难啃的是那些学术性的论文呢，里面专业名词多，难懂，代码又少，最主要我这个先天英文差，死啃烂啃才把六级啃过的人，看到一大堆英文免不了还是一阵发晕。言归正传，圣杯布局我听就听了很久很久啦，而且每次看到圣杯布局总会离不开一篇文章，那就是a list apart里面的。随着现在H5，CSS3的发展，IE6，IE7的逐渐退出舞台，或许现在工程师也没那么纠结了（或许而已，移动的大肆发展，还是出现了更多要兼容的东西，但是现在也逐渐不用再纠结那个IE6了吧，起码做移动端的就可以不用）。这篇文章06发布的，或许将来有一天人人的浏览器都支持CSS3的盒布局了，那浮动布局，绝对定位布局就可以退出舞台咯。

　　圣杯布局它的目标是左右两栏定宽，中间那一行流式。首先是html代码（为了简便处理这里就用位置命名ID，实际操作上还是使用语义化的词命名ID）：

　　一、圣杯布局需要比较多的数学计算，这里我设left的宽度为X，right的宽度为Y。这里先不考虑padding和margin。

　　第一步，设置container的padding-left为left的宽度，padding-right为right的宽度。(图片来自 a list apart,假设了left宽为200px,right宽为150px)

#container{
           padding-left:Xpx;        padding-right:Ypx;}

　　第二步，将每一列都设定好宽度。

　　

#container .column{
           float:left;}#center{
           width:100%;}#left{
           width:Xpx;}#right{
           width:Ypx;}#footer{
           clear:both;}

　　

　　第四步，把left放到应该到的位置上，就是center的左边。

#left{
           width:Xpx;        margin-left:100%;}

接着设置left层移到padding-left的位置那边，使用相对定位，跟它自己的位置相距离它的宽。

#container .column{
           float:left;        position:relative;}#left{
           width:Xpx;        margin-left:-100%;        right:Xpx;}

　　第五步，把right层移到padding-right的那个位置上

　　

#right{
           width：Ypx;        margin-right:-Ypx;}

　　最后一步，可用性的修改。由于中间center层是流式的，当窗口大小缩小到X+Y的时候，center就没有了，所以应该给#container设置一个最小宽度

body{
           min-width:(2X+Y)px;}

接着就是修改IE6以下的bug了，margin负值在IE6上会失效把left层弄到很远的地方，需要把它拉回来

* html #left {
     left: Ypx;}

至于为什么用right层的宽度，文中没有给出解析，要我们去尝试或者直接把它当成护身符。

二、带有padding的圣杯布局，假设left层的左右padding为x，center层的padding为y，right层的padding为z.

body {
     min-width: 2(2x+X+2y)+(2z+Y)px;      }#container {
     padding-left: (2x+X)px;     padding-right: (2z+Y+2y)px; }#container .column {
     position: relative;  float: left;}#center {
     padding: 0 ypx;      width: 100%;}#left {
     width: Xpx;            padding: 0 xpx;        right: (X+2x+y)px;           margin-left: -100%;}#right {
     width: Ypx;           padding: 0 zpx;        margin-right:(Y+2z+y)px;  }#footer {
     clear: both;}/*** IE Fix ***/* html #left {
     left: (2z+Y)px;         }

      圣杯布局是一个经典，或许在IE6还有点点问题，但是随着IE6的退出舞台，技术的快速发展，或者过多几年，这个技术也可能没人在用了，但是经典是不会被遗忘的。