css布局實例:網(wǎng)頁布局的辦法

許多網(wǎng)頁規(guī)劃師都喜愛，將兩個或者多個容器等高的并排放置，并在里面展現(xiàn)每個容器的內(nèi)容，就象經(jīng)典表格布局中的單元格操控幾個欄目的位置，也喜愛容器的內(nèi)容居中或頂部對齊顯現(xiàn)。

　　可是你又不喜愛用table來完成他，那怎么辦呢？完成的辦法許多，有根據(jù)視覺幻覺完成的，有用JS操控使高度相等的，還有采用容器溢出部分躲藏和列的負(fù)底鴻溝和正的內(nèi)補丁相結(jié)合的辦法來處理列高度相同的問題。

　　其實有個簡單的辦法，運用display:table, display:table-row and display:table-cell 就可以完成，并且高度小的容器會自適應(yīng)那些高度相對較高的，可是IE不支持這個特點，我們先不必去責(zé)備IE，相信今后會有所改善的。這里我制造了一個模型。

先看看xhtml的結(jié)構(gòu)：

＜div class="equal"＞ 
＜div class="row"＞ 
＜div class="one"＞＜/div＞ 
＜div class="two"＞＜/div＞ 
＜div class="three"＞＜/div＞ 
＜/div＞ 
＜/div＞

　　很簡單不必解說就能看懂，可是這里給出一個table的結(jié)構(gòu)，是不是很相似

＜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顯現(xiàn)，也就是將他作為一個表格 
　　2.border-collapse:separate;邊框獨立，就像表格沒有兼并單元格曾經(jīng) 
　　3.display:table-row;將.row作為表格行tr顯現(xiàn) 
　　4.display:table-cell;將.row的下級div作為表格單元格td顯現(xiàn) 
　　5.然后界說寬度

　　這里還運用了 border-spacing:10px;來區(qū)別幾個盒子，正如上面所陳述的，IE下不能正常顯現(xiàn)，可是在：Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1經(jīng)過測試均可以完美顯現(xiàn)