圣杯布局_html/css_WEB-ITnose-html教程-PHP中文网

圣杯布局_html/css_WEB-ITnose

php中文网

发布： 2016-06-24 11:43:59

原创

1748人浏览过

圣杯布局是一种经典布局，还有一种双飞翼布局，这两种布局都是需要我们掌握的。

圣杯布局它的目标是左右两栏定宽，中间那一行流式。首先是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)

Isotope.js动态布局库

查看详情

立即学习“前端免费学习笔记（深入）”；

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

登录后复制

转自：http://blog.csdn.net/cui_angel/article/details/8306470