四种div等高列的方法

1.使用display: table

 

<div class=”base”>


 <ul class=”base-row”>


 <li class="cell1"><div class="content1" >.....Lots of  Content....</div></li>


 <li class="cell1"><div class="content2">.....Lots of  content....</div></li>


 <li class="cell1"><div class="content3">.....Lots of  content....</div></li>


 </ul>


 </div>

 对应的css

.base {


 /*make it 100% width and a minimum of 1000px width*/


 width: auto;


 margin-left: 0px;


 margin-right: 0px;


 min-width: 1000px;


 padding: 0px;


display:table;


 }


.base-row {


 Display: table-row;


 }


.base li {


 display: table-cell;


 width: 33%;


 }


.cell1 {


 background-color: #f00;


 }


.cell2 {


 background-color: #0f0;


 }


.cell3 {


 background-color: #00f;


 }

 

不过这种方法不支持 IE7，不具有通用性， 没有试过这种，写在这当个资料。

 

2.使用javascript ,动态让他们等高 这种方法也有相应的jquery 插件， 网上一搜一大把。不过一但用户禁用javascript 网页设计就显的很难看。本人不太喜欢这样方法、

 

3.使用分别的背景颜色div

<div class=”rightback”>
<div class=”contentback”>
<div class=”leftback”>
<div  class=”leftsidebar”>…Lots Of Content…</div>
<div class=”content”>  …Lots Of Content…</div>
<div  class=”rightsidebar”> …Lots Of Content…</div>
</div>
</div>
</div>

  

 

对应的css

 

.rightback  {
width: 100%;
float:left;
background-color: green;
overflow:hidden;
position:relative;
}
.contentback  {
float:left;
background-color:blue;
width: 100%;
position:relative;
right: 300px;    /* width of right sidebar */
}
.leftback  {
width: 100%;
position:relative;
right: 400px; /* width of the  content area */
float:left;
background-color: #f00;
}

.container  {
width: 900px;
margin-left: auto;
margin-right:auto;
}

.leftsidebar  {
float:left;
width: 200px;
overflow:hidden;
position:relative;
left: 700px;
}

.content  {
float:left;
width: 400px;
overflow:hidden;
position:relative;
left: 700px;
}

.rightsidebar  {
float:left;
overflow:hidden;
width: 300px;
background-color:#333;
position:relative;
left: 700px;
}

 

 

 

4.使用背景图片的方式来实际这种效果 ，也是 一种非常不错的方法 ，当然 用户不能禁用图片，很多blog都采用这种方式 。