利用css+div层轻松实现表格table布局

先看看xhtml的结构：

＜div class="equal"＞

＜div class="row"＞

＜div class="one"＞＜/div＞

＜div class="two"＞＜/div＞

＜div class="three"＞＜/div＞

＜/div＞

＜/div＞

很简单不用解释就能看懂，但是这里给出一个table的结构，是不是很相似

＜table＞

＜tr＞

＜td＞＜/td＞

＜td＞＜/td＞

＜td＞＜/td＞

＜/tr＞

＜/table＞

下来是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 {

}

解释：

1.dispaly:table;让层.equal作为块级元素的表格table显示，也就是将他作为一个表格

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

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

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

5.然后定义宽度

这里还使用了 border-spacing:10px;来区别几个盒子，正如上面所陈述的，IE下不能正常显示，但是在：Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1经过测试均可以完美显示.

Copyright ＠ 2007-2012 敏韬网(敏而好学，文韬武略--MinTao.Net)（学习笔记） Inc All Rights Reserved.
闵涛 E_mail:admin@mintao.net(欢迎提供学习资源)

鄂公网安备 42011102001154号

站长：MinTao ICP备案号：鄂ICP备11006601号-18