纯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的高度将决定父盒子的高度。

上一篇:Java从零开始学二十四(集合工具类Collections)


下一篇:C#中隐式接口与显示接口