列的互适应等高作者：Neoxone 发表时间： 2008年08月26号，星期二 阅读：10,979 次 利用margin-bottom负值与padding-bottom抵消法。 两列情况 <!DOCTYPE html> <head> <title>左右两列高度互适应</title> <style type="text/css"> #wrap{width:600px;margin:0 auto;overflow: hidden} #left{width:300px;float:left;background:green;} #right{width:300px;float:left;background:gray;} .row{margin-bottom:-1000em;padding-bottom:1000em;} #footer{width:600px;margin:0 auto;text-align:left;background:#f4dcd8;} </style> </head> <body> <div id="wrap"> <div id="left" class="row"> 左侧</div> <div id="right" class="row"> 右侧<br /> 右侧<br /> 右侧<br /> 右侧<br /> 右侧<br /> 右侧<br /> 右侧<br /> 右侧<br /> 右侧<br /> 右侧<br /> 右侧<br /> 右侧<br /> 右侧<br /> </div> </div> <div id="footer">底部</div> </body> </html> 多列多模块 <!DOCTYPE html> <head> <meta charset="utf-8" /> <title>多列多模块高度自适应</title> <style type="text/css"> .main {overflow: hidden; width: 800px; margin: 0 auto;} .left, .center, .right{float: left; width: 250px; overflow: hidden; margin-left:5px; } .equal {padding-bottom: 1000em; margin-bottom: -1000em;zoom:1;} .box {background: #f4dcd8; border: 1px #FB9D51 solid; padding-left:10px; } .mt5 {margin-top: 5px;} .bor_top { height:1px; background:#FB9D51; overflow:hidden; } </style> </head> <body> <div class="main"> <div class="left equal"> <div class="box"> Left NO.1 </div> <div class="box mt5"> Left NO.2 </div> <div class="box mt5"> Left NO.3 </div> <div class="equal mt5 box"> Left NO.4<br /> Left NO.4<br /> Left NO.4<br /> Left NO.4<br /> Left NO.4<br /> Left NO.4<br /> Left NO.4<br /> Left NO.4<br /> Left NO.4<br /> Left NO.4<br /> Left NO.4<br /> Left NO.4<br /> Left NO.4<br /> </div> </div> <div class="center equal"> <div class="box"> center NO.1<br /> center NO.1<br /> center NO.1<br /> </div> <div class="box mt5"> center NO.2<br /> </div> <div class="equal mt5 box"> center NO.3<br /> center NO.3<br /> center NO.3<br /> center NO.3<br /> center NO.3<br /> center NO.3<br /> center NO.3<br /> center NO.3<br /> center NO.3<br /> center NO.3<br /> </div> </div> <div class="equal right"> <div class="box"> right NO.1 </div> <div class="box mt5"> right NO.2<br /> right NO.2<br /> right NO.2<br /> </div> <div class="box mt5"> right NO.3<br /> right NO.3<br /> right NO.3<br /> right NO.3<br /> right NO.3<br /> right NO.3<br /> </div> <div class="equal mt5 box"> right NO.4<br /> right NO.4<br /> right NO.4<br /> right NO.4<br /> right NO.4<br /> right NO.4<br /> right NO.4<br /> </div> </div> </div> <div class="main"><div class="left bor_top"></div><div class="center bor_top"></div><div class="right bor_top"></div></div> </body> </html> 相关文章:《三列互适应等高且中列宽度自适应布局的几个方法（圣杯布局）》《一种不常用的布局——中间列宽度固定，左右列自适应宽》《简单的左右对齐的列表布局》《二列左列宽度固定，右列宽度自适应布局的四种方法》《footer居于页面底部。当页面不够长时，居窗口底部》 标签： CSS2, 布局 这篇文章发布于 2008年08月26号，星期二，19:48，归类于 CSS2。 您可以跟踪这篇文章的评论通过 RSS 2.0 feed。 您可以留下评论，或者从您的站点trackback。
[...] http://www.cssass.com/blog/?p=12 这个的多列多模块 等高也是很不错 [...]