下面讲css div布局网页的又一技巧，可以像表格一样进行布局。请看下面例子：
.equal {
display:table;
border-collapse:separate;
}
.row {
display:table-row;
}
.row div {
display:table-cell;
}
html,body {
margin:0;
padding:0;
color:#000;
background:#fff;
}
body {
font:76%/140% "Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;
}
.equal {
margin:10px auto;
border-spacing:10px;
background:#898B60;
width:600px;
}
.row div {
background:#fff;
}
.row .one {
width:200px;
}
.row .two {
width:200px;
}
.row .three {
vertical-align:middle;
}
.row div h2 {
margin:0 0 0.5em 0;
padding:0.5em 10px;
font-size:1.2em;
color:#fff;
background:#595B30;
}
.row div p {
font-size:0.94em;
margin:0.5em 0;
padding:0 10px;
}
#labfooter {
text-align:center;
clear:both;
}
</style>
<!-- Some rules to make IE/Win display the boxes with variable height. -->
<!--[if IE]>
<style type="text/css" media="all">
.equal, .row {
display:block;
}
.row {
padding:10px;
}
.row div {
display:block;
float:left;
margin:0;
}
.row .two {
margin-left:10px;
}
.row .three {
width:160px;
float:right;
margin-right:50px;
}
.ieclearer {
float:none;
clear:both;
height:0;
padding:0;
font-size: 2px;
line-height:0;
}
</style>
<![endif]-->
</head>
<body>
<div class="equal">
<div class="row">
<div class="one">
<h2>This is a box</h2>
这个容器含有较少的内容，但是他的高低却能和较多内容的容器等高</div>
<div class="two">
<h2>This is another box</h2>
<p>这个盒子含有比另外一个更多的内容. 如果所有的容器都作为单元格显示, 那么它的高度将是所有容器的高度. 它现在像表格一样显示, 但是他不是一个表格.</p>
<p>另外, display:table, display:table-row and display:table-cell 使的div显示出像表格一样的效果，遗憾的是他不能正常运行在你所熟悉的浏览器IE上,可以顺利运行于像 Mozilla, Opera, Safari, Firefox, OmniWeb, Camino, and Netscape.这些浏览器上面.然后IE得到供选择CSS，规则防止它完全地毁坏这种布局。</p>
<p>了解更多细节: <a href="http://www.jb200.com">Equal height boxes with CSS</a>.</p>
</div>
<div class="three">
<p>这也是个含有较少内容的容器.而且内容是垂直居中显示的</p>
</div>
<!--[if IE]>
<div class="ieclearer"></div>
<![endif]-->
</div>
</div>
<div id="labfooter">
<a href="http://www.jb200.com/">网页布局</a>
</body>
然后在CSS中也增加一个判断，配合xhtml,用浮动对齐的方式来实现容器的等高并排放置，但是还是无法实现等高，你可以采用添加背景颜色的视觉错觉来实现视觉上的等高，下面是CSS中的代码：