圣杯布局我听就听了很久很久啦,而且每次看到圣杯布局总会离不开一篇文章,那就是a list apart里面的In Search of the Holy Grail。随着现在H5,CSS3的发展,IE6,IE7的逐渐退出舞台,或许现在工程师也没那么纠结了(或许而已,移动的大肆发展,还是出现了更多要兼容的东西,但是现在也逐渐不用再纠结那个IE6了吧,起码做移动端的就可以不用)。这篇文章06发布的,或许将来有一天人人的浏览器都支持CSS3的盒布局了,那浮动布局,绝对定位布局就可以退出舞台咯。

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

复制代码
<div id="header"></div>

<div id="container">
  <div id="center" class="column"></div>
  <div id="left" class="column"></div>
  <div id="right" class="column"></div>

</div>

<div id="footer"></div>
复制代码

  一、圣杯布局需要比较多的数学计算,这里我设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的退出舞台,技术的快速发展,或者过多几年,这个技术也可能没人在用了,但是经典是不会被遗忘的。

 

posted on 2014-10-21 16:19  冰~ice  阅读(222)  评论(0编辑  收藏  举报