方法一: 通过父级overflow:hidden,  自己设置padding-bottom 和 margin-bottom来实现.

 

 1 #wrap{
 2  overflow:hidden;
 3  width:1000px;
 4  margin:0 auto;
 5 }
 6 #left,#center{
 7  margin-bottom:-10000px;
 8  padding-bottom:10000px;
 9 }
10 #left{
11  float:left;
12  width:250px;
13  background:#00FFFF;
14  }
15 #center{
16  float:left;
17  width:500px;
18  background:#FF0000;
19  }

 

参考链接:  纯css实现div左右等高

 

 

 

 方法二: 使用 table-cell

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style>
 7         .left,
 8         .right {
 9             padding: 10px;
10             display: table-cell;
11             border: 1px solid #f40;
12         }
13     </style>
14 </head>
15 <body>
16 <div class="wrap">
17     <div class="left">
18         left div
19         <br/>
20         <br/>
21         <br/>
22         <br/>
23         <br/>
24     </div>
25     <div class="right">right div</div>
26 </div>
27 </body>
28 </html>

 

 参考链接:   纯css实现div左右等高

 

方法三:使用css3盒模型

 1 <!DOCTYPE html>
 2 <html>
 3 <head>
 4     <meta charset="utf-8">
 5     <title></title>
 6     <style>
 7         .wrap {
 8             display: -webkit-box;
 9         }
10         .left,
11         .right {
12             padding: 10px;
13             border: 1px solid #f40;
14         }
15     </style>
16 </head>
17 <body>
18 <div class="wrap">
19     <div class="left">
20         left div
21         <br/>
22         <br/>
23         <br/>
24         <br/>
25         <br/>
26     </div>
27     <div class="right">right div</div>
28 </div>
29 </body>
30 </html>

 

 参考链接: 纯css实现div左右等高