列的互适应等高 - Mr.Drive2Far

利用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>