四種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都採用這種方式 。