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經過測試均可以完美顯現