列的互适应等高 #CSS2 2008-08-26 利用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>
Theme Tranquility
