一个CSS布局的实例，等高的两个左右Div，很多时候，我们都需要两列等高，那怕其中一个是自适应高度呢。如例子所示，只要你按代码的方法去做了，不管有多少列，它都会以左边列为标准，自动适应高度，而且在兼容性方面，似乎做的也不错的。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"><html xmlns="http://www.w3.org/1999/xhtml"><head><title>CSS特效-两列等高布局效果</title><meta http-equiv="content-type" content="text/html;charset=gb2312"><style type="text/css">*{margin:0;padding:0}html{overflow-y:scroll}body{font-size:12px;background:#fff;color:#333}ul,ol{list-style:none}a{text-decoration:none;color:#f30}img{border:none}.clearfix{zoom:1}.clearfix:after{content:"";display:block;height:0;line-height:0;font-size:0;visibility:hidden;clear:both}.padding_con{height:150px;line-height:150px;text-align:center}.hd_wrap{background:#333;border-bottom:3px solid #f30;zoom:1}.header,.ct_wrap,.ft_wrap{width:950px;margin:0 auto;zoom:1}.ct_wrap{background:#e0e0e0}.header{height:45px;line-height:45px;color:#fff;border-bottom:3px solid #f30;margin-bottom:-3px;position:relative;background:#333}.content{margin-left:150px;border-left:1px solid #333;background:#fff}.main_col{float:left;width:100%;Word-wrap:break-word}.side_col{float:left;width:150px;margin-left:-950px;position:relative;word-wrap:break-word}.ft_wrap{border-top:2px solid #333;zoom:1}.footer{text-align:center;padding:10px 0}</style></head><body><div class="hd_wrap"> <div class="header"> 这里是我的网站的头部 </div></div><div class="ct_wrap"> <div class="content clearfix"> <div class="main_col"> <div class="padding_con"> 我也可以有背景色 </div> <div class="padding_con"> 不管有几个我，右边看起来总是和左边一样高 </div> <div class="padding_con"> 不管有几个我，右边看起来总是和左边一样高 </div> </div> <div class="side_col"> <div class="padding_con"> 我可以有背景色 </div> </div> </div></div><div class="ft_wrap"> <div class="footer"> CopyRight © 2011 by Cage </div></div></body></html>
新闻热点
疑难解答
