圣杯布局的实践
原文地址：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的修复是自己实践的结果。
页:
[1]