如何使用div+css达到和table一样布局效果

翻译自：Equal height boxes with CSS part II原文：http://www.456bereastreet.com/archive/200406/equal_height_boxes_with_css_part_ii/

下面是我翻译的内容，是根据我对文章的理解意译的，你就别挑哪里翻译的不对了，我的目的只是传达这个CSS技巧

上一篇的问题就是，这个模型对IE来说等同于垃圾，所以基本只能是做来玩玩而已，没有什么实际的用处，现在我要做的就是，让它也能在IE下更好的显示,所以我又做了 第二个模型

xhtml结构类似 第一个模型 的只是增加一个新的div给IE

<div class="equal">    <div class="row">        <div class="one"></div>        <div class="two"></div>        <div class="three"></div>        <!--[if IE]>        <div class="ieclearer"></div>        <![endif]-->    </div></div>

给xhtml增加一个判断，判断是否为IE，然后给IE一个特殊待遇，在IE显示和别的浏览器不同的代码，对于这个判断IE\MAC优先选择显示其间的内容。

然后在CSS中也增加一个判断，配合xhtml,用浮动对齐（浮动对齐就不用解释了）的方式来实现容器的等高并排放置，但是还是无法真实的实现等高，你可以采用添加背景颜色的视觉错觉来实现视觉上的等高，或者采用别的方法，这里就不进行说明了。下面是CSS中的代码

<!--[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;}.ieclearer {    float:none;    clear:both;    height:0;    padding:0;    font-size: 2px;    line-height:0;}    </style><![endif]-->

到此，整个设计真正的完成了，虽然不够完美，对非IE而做出努力显得有点多余，现在要么IE支持第一个模型，要么我们可能会想出更好的方案来。但是这次尝试是有价值的。