文章用一个三列高度自适应方法来解决在我们以前开发时经常会碰到左右高度不对时无法处理的办法，有需要的同学可以看看，很实例的。
| 代码如下 |
|
|
<!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>
|
