利用CSS的三列等高布局

以前自己都是用JS去处理,原来用CSS也是很方便的,可以少写代码^_^

<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>三列等高布局</title>
<style type="text/css">
*
{margin:0; padding:0;}
body
{font-size:12px; font-family:Arial;}

#Header,#Footer
{margin:0 auto; height:100px; width:800px; background:Red; color:#FFF;} /*关部和尾部样式*/
#Container
{width:800px; margin:10px auto; height:1%; overflow:hidden;}/*overflow:hidden可以用来清除浮动,而此处再加上height:1%也是为了解决IE6下光用overflow不能清除浮动的原因*/
#Container div
{float:left; display:inline; width:258px; border:1px solid #F60;
background
:url(border_bottom.png) repeat-x left 300px #CCC; color:Blue; padding-bottom:9999px;
margin-bottom
:-9999px;}/* 左浮动以后再用 display:inline是为了消除IE6的双边距Bug */
#Container div.center
{margin-left:10px; margin-right:10px; height:300px;}
#Container div.left
{height:300px;}
</style>
</head>
<body>
<div id="Header">我是头部</div>
<div id="Container">
<div class="left">清除浮动可以用 overflow:hidden 或 overflow:auto,<br />在比较标准的浏览器里没有问题,<br />但 IE6 没有效果,为了兼容 IE6 ,<br />可以为父元素:<br />

1、设置一个合适的宽度,<br />但“合适的宽度”有的时候不好掌握;<br />

2、加上 height:1% ,什么都不用管,加上就有效,我还没有发现缺点;<br />

3、加上 zoom:1 ,不能通过W3C验证。</div>
<div class="center">
此处的三列等高布局是利用了CSS的特性,先给容器加上一个很大的padding-bottom再用 margin-bottom负值补回来,而外层(#Container)用overflow:hidden将不显示区域隐藏起来,
因为这些Div我都设了1px的边框,此时你会发现,他们下部的边框没有了,因此还得再做一张1px的图片,作为这些div的背景显示在底部。
</div>
<div class="right">右边</div>
</div>
<div id="Footer">我是底部</div>
</body>
</html>

运行效果:

posted @ 2011-12-29 23:45  漫漫江雪  阅读(295)  评论(0编辑  收藏  举报