在该方法中我们使用一个列表或一个div包围的一组<DIV> S(每一列)。封闭的div给出显示:表的属性,每个封闭的div给出显示:表格单元格属性。
我将用一个例子讨论这个:
样式代码如下:
<style>
.base {
/*make it 100% width and a minimum of 1000px width*/
width:auto;
margin:0 auto;
min-width:1000px;
padding:0px;
display:table;
}
.base-row {
Display:table-row;
}
.base li {
display:table-cell;
width:33%;
text-align:center;
}
.cell1 {
background-color:#9933FF;
}
.cell2 {
background-color:#339933;
}
.cell3 {
background-color:#CC99FF;
}
</style>
HTML代码如下:
<div class="base">
<ul class="base-row">
<li class="cell1">
<div class="content1" >.....Lots of Content....</div>
</li>
<li class="cell2">
<div class="content2">.....Lots of content....<br /><br />heihei</div>
</li>
<li class="cell3">
<div class="content3">.....Lots of content....</div>
</li>
</ul>
</div>
优势:
这是非常简单和容易实现的。它比其他方法更简单。这可以为您节省很多头痛和时间。
一个边缘(在表布局单元格间距等)不能被应用到每一个细胞。这可以通过使用白颜色边框克服(或背景色)一个合适的宽度来模拟一个单元格间距。
如果您觉得本文的内容对您的学习有所帮助:
关键字:
解决列等高 CSS样式代码