div 等高度问题

来自:http://www.cnblogs.com/wifi/articles/3059038.html

<!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;
  500px;
 margin: 0 auto;
}
.left {
 float: left;
  250px;
 overflow: hidden;
}
.right {
 float: right;
  245px;
 overflow: hidden;
}
.bor_top {
 height:1px;
 background:#FB9D51;
 overflow:hidden;
}
.equal {
 padding-bottom: 32767px;
 margin-bottom: -32767px;
}
.box {
 background: #F5E2AF;
 border: 1px #FB9D51 solid;
 padding-left:10px;
 padding-right:10px;
}
.mt5 {
 margin-top: 5px;
}
</style>
</head>
<body>
<div class="main">
  <div class="left equal">
    <div class="box">
      <p>你相信这个左右等高的布局是纯的CSS写的吗？</p>
    </div>
    <div class="box mt5">
      <p>来测试一下吧？~！</p>
    </div>
    <div class="box mt5">
      <p>测试一下</p>
    </div>
    <div class="equal mt5 box">
      <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>
      <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>
  <div class="equal right">
    <div class="box">
      <p>测试一下</p>
      <p>测试一下</p>
    </div>
    <div class="box mt5">
      <p>测试一下</p>
      <p>测试一下</p>
      <p>测试一下</p>
    </div>
    <div class="box mt5">
      <p>测试一下</p>
      <p>测试一下</p>
      <p>测试一下</p>
      <p>测试一下</p>
      <p>测试一下</p>
      <p>测试一下</p>
    </div>
    <div class="equal mt5 box">
      <p>测试一下</p>
      <p>测试一下</p>
      <p>测试一下</p>
    </div>
  </div>
</div>
<div class="main">
  <div class="left bor_top"></div>
  <div class="right bor_top"></div>
</div>
</body>
</html>

效果：

无标题 1

你相信这个左右等高的布局是纯的CSS写的吗？

来测试一下吧？~！

测试一下

作者：JasonXuVip

出处：http://www.cnblogs.com/jasonxuvip/

我的网址：政和生活网

本文地址：

本文版权归作者和博客园共有，欢迎转载，但未经作者同意必须保留此段声明，且在文章页面明显位置给出原文连接，否则保留追究法律责任的权利.