一個小目標
當前位置:安徽时时彩平台注册码 > Cms文章 > 正文

Html技巧-簡單的把Table轉成Div

06-05 Cms文章

安徽时时彩平台注册码 www.lqwxb.icu  許多網頁設計師都喜歡,將兩個或者多個容器等高的并排放置,并在里面展示每個容器的內容,就象經典表格布局中的單元格控制幾個欄目的位置,也喜歡容器的內容居中或頂部對齊顯示。但是你又不喜歡用table來實現他,那怎么辦呢?實現的方法很多,有根據視覺錯覺實現的,有用JS控制使高度相等的,還有采用容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法來解決列高度相同的問題。其實有個簡單的方法,使用display:table, display:table-row and display:table-cell 就可以實現,而且高度小的容器會自適應那些高度相對較高的,但是IE不支持這個屬性,我們先不用去責備IE,相信以后會有所改善的。這里我制作了一個模型。

先看看xhtml的結構:

  1. <div class="equal">  
  2. <div class="row">  
  3. <div class="one"></div>  
  4. <div class="two"></div>  
  5. <div class="three"></div>  
  6. </div>  
  7. </div>  

很簡單不用解釋就能看懂,但是這里給出一個table的結構,是不是很相似:

  1. <table> 
  2. <tr> 
  3. <td></td> 
  4. <td></td> 
  5. <td></td> 
  6. </tr> 
  7. </table> 

下來是css:

  1. .equal { 
  2. display:table; 
  3. border-collapse:separate; 
  4. .row { 
  5. display:table-row; 
  6. .row div { 
  7. display:table-cell; 
  8. .row .one { 
  9. width:200px; 
  10. .row .two { 
  11. width:200px; 
  12. .row .three { 
  13.  

解釋:

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

版權?;? 轉載請保留鏈接: //www.lqwxb.icu/cms/10.html

? 新版手机上市 pk10单双计划软件app 三公技巧 体彩7码遗漏 功夫时时彩计划软件下载 体彩排列五是有规律的 福建时时玩法介绍 江苏时时开奖号码 快速时时走势图 广东时时三星分析 四川时时走势图 pk10技巧 稳赚六码 pk10如何找冠军规律 pk10技巧冠亚和稳赚 球探体育比分老版本 北京pk赛车10开奖纪录