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

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

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

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

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

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

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

＜table＞ 
＜tr＞ 
＜td＞＜/td＞ 
＜td＞＜/td＞ 
＜td＞＜/td＞ 
＜/tr＞ 
＜/table＞　

　下來(lái)是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 {

}

　　解說(shuō)：

　　1.dispaly:table;讓層.equal作為塊級(jí)元素的表格table顯現(xiàn)，也就是將他作為一個(gè)表格 
　　2.border-collapse:separate;邊框獨(dú)立，就像表格沒(méi)有兼并單元格曾經(jīng) 
　　3.display:table-row;將.row作為表格行tr顯現(xiàn) 
　　4.display:table-cell;將.row的下級(jí)div作為表格單元格td顯現(xiàn) 
　　5.然后界說(shuō)寬度

　　這里還運(yùn)用了 border-spacing:10px;來(lái)區(qū)別幾個(gè)盒子，正如上面所陳述的，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)過(guò)測(cè)試均可以完美顯現(xiàn)