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都采用这种方式 。