stophhc

  博客园 :: 首页 :: 新随笔 :: 联系 :: 订阅 :: 管理 ::
css多列等高

<!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>无标题 1</title>
<style type="text/css">
* {margin: 0; padding: 0;}
body {margin:30px;font:14px/1.6em Verdana, Lucida, Arial, Helvetica, 宋体,sans-serif; }
.main {overflow: hidden; width: 800px; margin: 0 auto;}
.left {float: left; width: 250px; overflow: hidden; }
.center {float:left; margin-left:5px; width:295px; }
.right {float: right; width: 245px; overflow: hidden;}
.bor_top { height:1px; background:#FB9D51; overflow:hidden; }
.equal {padding-bottom: 32767px; margin-bottom: -32767px; border:1px solid #FB9D51;}

</style>
</head>
<body>
<div class="main">
<div class="left equal">


<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>

</div>
<div class="center equal">

<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>

</div>
<div class="equal right">

<p>测试一下</p>
<p>测试一下</p>
<p>测试一下</p>

</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>

 

posted on 2012-12-10 17:12  stophhc  阅读(94)  评论(0)    收藏  举报