<p>我们开发时经常会碰到左右高度不对的情况，该怎么处理呢？教你用一个三列高度自适应方法来解决。
 代码如下：</p><div style="page-break-after: always;"><span style="display: none;"><!--more-->& nbsp ;</span></div><p><!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>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>css DIV三列高度自适应</title>
<style type="text/CSS">
*{padding:0;margin:0;}.main .box{float:left;width:300px;background-color:#FFF;margin-top:8px;margin-bottom:-2000px;margin-left:8px;display:inline;border:1px solid #999;padding-right:8px;padding-left:8px;padding-bottom:2000px;padding-top:8px;}.main{background-color:#CCC;overflow:hidden;width:986px;margin-right:auto;margin-left:auto;position:relative;}.main_bottom{background-color:#CCC;height:8px;width:986px;margin-right:auto;margin-left:auto;overflow:hidden;}.main .box .bottom_line{background-color:#999;height:1px;position:absolute;width:318px;bottom:0px;_bottom:-1px;left:8px;display:inline;overflow:hidden;}.main .box .bottom_line2{background-color:#999;height:1px;position:absolute;width:318px;bottom:0px;_bottom:-1px;left:334px;display:inline;overflow:hidden;}.main .box .bottom_line3{background-color:#999;height:1px;position:absolute;width:318px;bottom:0px;_bottom:-1px;left:660px;display:inline;overflow:hidden;}</style>
</head>
<body>
<div class="main">
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <div class="bottom_line"></div>
  </div>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>4</p>
    <div class="bottom_line2"></div>
  </div>
  <div class="box">
    <p>1</p>
    <p>2</p>
    <p>3</p>
    <p>5</p>
    <p>6</p>
    <p>7</p>
    <div class="bottom_line3"></div>
  </div>
</div>
<div class="main_bottom"></div>
</body>
</html></p>