主頁 > 知識庫 > 用div實現(xiàn)像table一樣的布局方法

用div實現(xiàn)像table一樣的布局方法

熱門標簽:蘇州做電話機器人 地圖標注樓盤 地圖標注微信好友 ai電話機器人效果差 沈陽400電話辦理多少錢 南山電話機器人 隨州外呼系統(tǒng)廠家 快速更改地圖標注點標 南昌電話機器人系統(tǒng)

許多網(wǎng)頁設(shè)計師都喜歡,將兩個或者多個容器等高的并排放置,并在里面展示每個容器的內(nèi)容,就象經(jīng)典表格布局中的單元格控制幾個欄目的位置,也喜歡容器的內(nèi)容居中或頂部對齊顯示。
但是你又不喜歡用table來實現(xiàn)他,那怎么辦呢?實現(xiàn)的方法很多,有根據(jù)視覺錯覺實現(xiàn)的,有用JS控制使高度相等的,還有采用容器溢出部分隱藏和列的負底邊界和正的內(nèi)補丁相結(jié)合的方法來解決列高度相同的問題。
其實有個簡單的方法,使用display:table, display:table-row and display:table-cell 就可以實現(xiàn),而且高度小的容器會自適應(yīng)那些高度相對較高的,但是IE不支持這個屬性,我們先不用去責備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顯示,也就是將他作為一個表格
2.border-collapse:separate;邊框獨立,就像表格沒有合并單元格以前
3.display:table-row;將.row作為表格行tr顯示
4.display:table-cell;將.row的下級div作為表格單元格td顯示
5.然后定義寬度

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

標簽:大同 玉樹 昭通 石家莊 濰坊 濰坊 深圳 商洛

巨人網(wǎng)絡(luò)通訊聲明:本文標題《用div實現(xiàn)像table一樣的布局方法》,本文關(guān)鍵詞  用,div,實,現(xiàn)像,table,一樣,;如發(fā)現(xiàn)本文內(nèi)容存在版權(quán)問題,煩請?zhí)峁┫嚓P(guān)信息告之我們,我們將及時溝通與處理。本站內(nèi)容系統(tǒng)采集于網(wǎng)絡(luò),涉及言論、版權(quán)與本站無關(guān)。
  • 相關(guān)文章
  • 下面列出與本文章《用div實現(xiàn)像table一樣的布局方法》相關(guān)的同類信息!
  • 本頁收集關(guān)于用div實現(xiàn)像table一樣的布局方法的相關(guān)信息資訊供網(wǎng)民參考!
  • 推薦文章