| 導購 | 订阅 | 在线投稿
分享
 
 
 

css布局實例:網頁布局的方法

來源:互聯網  2008-06-01 03:31:24  評論

許多網頁設計師都喜歡,將兩個或者多個容器等高的並排放置,並在裏面展示每個容器的內容,就象經典表格布局中的單元格控制幾個欄目的位置,也喜歡容器的內容居中或頂部對齊顯示。

但是你又不喜歡用table來實現他,那怎麽辦呢?實現的方法很多,有根據視覺錯覺實現的,有用JS控制使高度相等的,還有采用容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法來解決列高度相同的問題。

其實有個簡單的方法,使用display:table, display:table-row and display:table-cell 就可以實現,而且高度小的容器會自適應那些高度相對較高的,但是IE不支持這個屬性,我們先不用去責備IE,相信以後會有所改善的。這裏我制作了一個模型。

先看看xhtml的結構:

<div class="equal">

<div class="row">

<div class="one"></div>

<div class="two"></div>

<div class="three"></div>

</div>

</div>

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

<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;來區別幾個盒子,正如上面所陳述的,IE下不能正常顯示,但是在:Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1經過測試均可以完美顯示.

  許多網頁設計師都喜歡,將兩個或者多個容器等高的並排放置,並在裏面展示每個容器的內容,就象經典表格布局中的單元格控制幾個欄目的位置,也喜歡容器的內容居中或頂部對齊顯示。   但是你又不喜歡用table來實現他,那怎麽辦呢?實現的方法很多,有根據視覺錯覺實現的,有用JS控制使高度相等的,還有采用容器溢出部分隱藏和列的負底邊界和正的內補丁相結合的方法來解決列高度相同的問題。   其實有個簡單的方法,使用display:table, display:table-row and display:table-cell 就可以實現,而且高度小的容器會自適應那些高度相對較高的,但是IE不支持這個屬性,我們先不用去責備IE,相信以後會有所改善的。這裏我制作了一個模型。 先看看xhtml的結構: <div class="equal"> <div class="row"> <div class="one"></div> <div class="two"></div> <div class="three"></div> </div> </div>   很簡單不用解釋就能看懂,但是這裏給出一個table的結構,是不是很相似 <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;來區別幾個盒子,正如上面所陳述的,IE下不能正常顯示,但是在:Mozilla 1.6, Opera 7.50, Safari 1.2.2, Firefox 0.8, OmniWeb 5b, Camino 0.8b, and Netscape 7.1經過測試均可以完美顯示.
󰈣󰈤
王朝萬家燈火計劃
期待原創作者加盟
 
 
 
>>返回首頁<<
 
 
 
 
 熱帖排行
 
 
 
靜靜地坐在廢墟上,四周的荒凉一望無際,忽然覺得,淒涼也很美
© 2005- 王朝網路 版權所有