css布局实例:网页布局的办法

许多网页规划师都喜爱，将两个或者多个容器等高的并排放置，并在里面展现每个容器的内容，就象经典表格布局中的单元格操控几个栏目的位置，也喜爱容器的内容居中或顶部对齐显现。

　　可是你又不喜爱用table来完成他，那怎么办呢？完成的办法许多，有根据视觉幻觉完成的，有用JS操控使高度相等的，还有采用容器溢出部分躲藏和列的负底鸿沟和正的内补丁相结合的办法来处理列高度相同的问题。

　　其实有个简单的办法，运用display:table, display:table-row and display:table-cell 就可以完成，并且高度小的容器会自适应那些高度相对较高的，可是IE不支持这个特点，我们先不必去责备IE，相信今后会有所改善的。这里我制造了一个模型。

先看看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经过测试均可以完美显现