許多網(wǎng)頁設(shè)計(jì)師都喜歡,將兩個(gè)或者多個(gè)容器等高的并排放置,并在里面展示每個(gè)容器的內(nèi)容,就象經(jīng)典表格布局中的單元格控制幾個(gè)欄目的位置,也喜歡容器的內(nèi)容居中或頂部對齊顯示。 但是你又不喜歡用table來實(shí)現(xiàn)他,那怎么辦呢?實(shí)現(xiàn)的方法很多,有根據(jù)視覺錯(cuò)覺實(shí)現(xiàn)的,有用JS控制使高度相等的,還有采用容器溢出部分隱藏和列的負(fù)底邊界和正的內(nèi)補(bǔ)丁相結(jié)合的方法來解決列高度相同的問題。 其實(shí)有個(gè)簡單的方法,使用display:table, display:table-row and display:table-cell 就可以實(shí)現(xiàn),而且高度小的容器會(huì)自適應(yīng)那些高度相對較高的,但是IE不支持這個(gè)屬性,我們先不用去責(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> 很簡單不用解釋就能看懂,但是這里給出一個(gè)table的結(jié)構(gòu),是不是很相似