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

posted @ 2016-02-24 13:21  ifIhaveWings  阅读(1140)  评论(0)  编辑  收藏  举报