纯css实现两列等高
<!doctype html>
<html>
<head>
<meta />
<title>Title</title>
<style type="text/css">
*{ margin:0; padding:0;}
.wrap { margin: 0 auto; width: 600px; clear: both; overflow: hidden; }
.left {margin-bottom: -8000px; padding-bottom: 8000px; width: 300px; float: left; background: #f00; }
.right {margin-bottom: -8000px; padding-bottom: 8000px; width: 200px; float: right; background: #0f0; }
</style>
</head>
<body>
<div class="wrap">
<div class="left">
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>
<div class="right">
<p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text t text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text </p>
</div>
</div>
</body>
</html>原理： 父盒子包含两个div，这两个div的不用写高度，而是都写上padding-bottom: 10000px;margin-bottom: -10000px;然后给父盒子加是overflow：hidden；如果填充这两个div，较高的那个div的高度将决定父盒子的高度。
相关推荐
html表格 横跨多行--跨多列
colspan="2"//表示跨两列rowspan="2//表示跨两行
时间：2024-05-02 14:21
