div 等高度问题

最新推荐文章于 2024-08-09 06:13:01 发布

ZXK515851

最新推荐文章于 2024-08-09 06:13:01 发布

阅读量165

点赞数

文章标签： xhtml

原文链接：http://www.cnblogs.com/jasonxuvip/archive/2013/06/14/3135447.html

版权

来自: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;
 width: 500px;
 margin: 0 auto;
}
.left {
 float: left;
 width: 250px;
 overflow: hidden;
}
.right {
 float: right;
 width: 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写的吗？

来测试一下吧？~！

测试一下

转载于:https://www.cnblogs.com/jasonxuvip/archive/2013/06/14/3135447.html

ZXK515851

关注

0
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
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 x...
复制链接

扫一扫