html div多个表格,CSS实现多个Div等高，类似表格布局

对于一些老网页设计者用表格用习惯了，有些思路还是延续表格的思想，如果要使用Div CSS布局方式实现多个等高的Div那怎么办呢？办法是有的，我们可以使用display:table, display:table-row and display:table-cell ，高度小的容器会自适应高度较高的的Div容器。我们先来看Div结构：

上面的代码看着像不像以前的

结构呢？我觉得挺像。好，Div的结构搞定了，下面就用CSS去控制它：equal{display:table;border-collapse:separate;}

.row {display:table-row;}

.row div {display:table-cell;}

.row .one {width:200px;}

.row .two {width:200px;}

.row .three {}

上面说一下上边各个CSS属性的意义：

1.dispaly:table;让.equal层作为块级元素的表格来显示，也就是将显示成表格的样子

2.border-collapse:separate;边框独立，就像表格没有合并单元格以前

3.display:table-row;将.row作为表格行tr显示

4.display:table-cell;将.row的下级div作为表格单元格td显示

使用border-spacing:10px;主要是来区分几个盒子，因为IE下不能正常显示，但是在：Mozilla、Opera、Firefox、Chrome下都是可以的。