并列div自动等高

方法一：css控制

 1 <!DOCTYPE html>
 2 <html lang="en">
 3 <head>
 4     <meta charset="UTF-8">
 5     <meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
 6 <title>完美的DIV三行三列自适应高度布局</title>
 7 <style type="text/css">
 8 body {
 9     margin:0;
10     padding:0;
11     font-size:12px;
12 }
13 .header {
14     width:100%;
15     height:50px;
16     background:#EEE;
17     border-bottom:1px solid #000;
18 }
19 .colmask {
20     position:relative;
21     clear:both;
22     width:100%;
23     overflow:hidden;
24 }
25 .colright, .colmid, .colleft {
26     float:left;
27     width:100%;
28     position:relative;
29 }
30 .col1, .col2, .col3 {
31     float:left;
32     position:relative;
33     overflow:hidden;
34 }
35 .threecol {
36     background:#BBB;
37 }
38 .threecol .colmid {
39     right:20%;
40     background:#CCC;
41 }
42 .threecol .colleft {
43     right:60%;
44     background:#DDD;
45 }
46 .threecol .col1 {
47     width:58%;
48     left:101%;
49 }
50 .threecol .col2 {
51     width:18%;
52     left:23%;
53 }
54 .threecol .col3 {
55     width:18%;
56     left:85%;
57 }
58 .footer {
59     clear:both;
60     width:100%;
61     height:50px;
62     background:#EEE;
63     border-top:1px solid #000;
64 }
65 </style>
66 </head>
67 <body>
68 <div class="header"> 这里是头部 </div>
69 <div class="colmask threecol">
70   <div class="colmid">
71     <div class="colleft">
72       <div class="col1">
73         <p>这里是中间</p>
74         <p>这里是中间</p>
75         <p>这里是中间</p>
76         <p>这里是中间</p>
77         <p>这里是中间</p>
78         <p>这里是中间</p>
79         <p>这里是中间</p>
80       
81       </div>
82       <div class="col2"> 这里是左栏 </div>
83       <div class="col3">
84         <p>这里是右栏</p>
85         <p>这里是右栏</p>
86         <p>这里是右栏</p>
87         <p>这里是右栏</p>
88       </div>
89     </div>
90   </div>
91 </div>
92 <div class="footer"> 这里是底部 </div>
93 </body>
94 </html>

方法二：JS控制

function SetSameHeight(obj1,obj2) 
{ 
     var h1 = $(obj1).outerHeight(); //获取对象1的高度
     var h2 = $(obj2).outerHeight();  //获取对象2高度
     var mh = Math.max( h1, h2); //比较一下
     $(obj1).height(mh); 
     $(obj2).height(mh); 
}
在页面用调用：
jQuery(document).ready(function($) {
  
    SetSameHeight(".left",".line");
    SetSameHeight(".right_main",".line");//如果有３个div 就加这一行代码，再适应一次．
  
}

　　参考博客：http://www.jianshu.com/p/93e61ec8f354