圣杯布局的实践

原文地址:http://www.alistapart.com/articles/holygrail
实践了一下;

<div id=”header”></div>
<div id=”container”>
<div id=”center”></div>
<div id=”left”></div>
<div id=”right”></div>
</div>
<div id=”footer”></div>

CSS:

body{min-width:550px;margin:0px;padding:0px}
#container{
padding-left:200px;
padding-right:150px;
}
#container .column{
position:relative;
float:left;
}
#center{
width:100%;
background:#ccc;
}
#left{
width:200px;
background:red;
margin-left:-100%;
right:200px;
}
#right{
width:150px;
background:blue;
margin-right:-150px;
}
#footer{
clear:both;
background:#000;
}
/*** IE6 Fix***/
* html #left{left:150px;}
/*** IE7 Fix***/
*:first-child+html #left{left:150px}


这样能实现最简单的三栏布局,并且三栏的高度自适应,根据里面的内容来定。最后是对IE6和IE7的修复.

如果想实现三栏一样高,并且加上padding,使得页面更加美观,那么需要这样写css。

body{min-width:630px;margin:0px;padding:0px}
#container{padding-left:200px;padding-right:190px;overflow:hidden;}
#container .column{padding-bottom:20010px;margin-bottom:-20000px;
position:relative;float:left;}
#center{padding:10px 20px;width:100%;background:#ccc;}
#left{width:180px;padding:0 10px;background:red;margin-left:-100%;right:240px;}
#right{width:130px;padding:0 10px;background:blue;margin-right:-190px;}
#footer{clear:both;background:#000;}
/*** IE6 Fix***/
* html #left{left:150px;}
* html body{overflow:hidden;}
* html #footer-wrapper{
float:left;
position:relative;
width:100%;
padding-bottom:10010px;
margin-bottom:-10000px;
background:#fff
}
/*** IE7 Fix***/
*:first-child+html #left{}
*:first-child+html body{overflow:hidden;position:relative}
*:first-child+html #footer-wrapper{
float:left;
position:relative;
width:100%;
padding-bottom:10010px;
margin-bottom:-10000px;
background:#fff;
}


ie6,ie7下总是有很多问题需要单独解决。。
这也只是实践 ,还有很多问题没搞明白,最后IE7的修复是自己实践的结果。
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值