如何用CSS標記平鋪佈局？

Question

如何標記沒有javascript的頁面？

這兩個HTML元素（div1，div2）都必須具有固定大小。

Answer 1

你必須與CSS的工作屬性 position， top， bottom， left， right和 height。 例如

<div style="position:absolute; left:0; right:0; top:0; bottom:0"> 
    <div style="position:absolute; left:0; right:0; top:0; height:42px; background:green">div1</div> 
    <div style="position:absolute; left:0; right:0; bottom:0; top:42px; background:red">div2</div> 
</div> 

http://jsfiddle.net/GPHEx/1/

• position:absolute讓您決定在像素和百分比（粗略地講）的佈局。
• left:0; right:0使其成爲全角。
• top:0將div對齊到上邊緣。
• bottom:0將div對齊到下邊緣。
• height:42px和top:42px定義平鋪佈局。

Vertical example：

<div style="position:absolute; left:0; right:0; top:0; bottom:0"> 
    <div style="position:absolute; top:0; bottom:0; left:0; width:42px; background:green">d i v 1</div> 
    <div style="position:absolute; top:0; bottom:0; right:0; left:42px; background:red">d i v 2</div> 
</div> 

Example with four tiles：

<div style="position:absolute; left:0; right:0; top:0; bottom:0"> 
    <div style="position:absolute; top:0; height:80px; left:0; width:42px; background:green">d i v 1</div> 
    <div style="position:absolute; top:0; height:80px; right:0; left:42px; background:red">d i v 2</div> 
    <div style="position:absolute; top:80px; bottom:0; left:0; width:42px; background:red">d i v 3</div> 
    <div style="position:absolute; top:80px; bottom:0; right:0; left:42px; background:green">d i v 4</div> 
</div> 

注意如何top + height RESP。 left + width一起工作。 通過將上一個高度添加到下一個頂部，您可以擁有更多的貼圖。

使用overflow您可以定義如果內容太多會發生什麼情況。如果需要，overflow:auto向div添加一個滾動條。 overflow:hidden會裁剪它。

Answer 2

雖然我沒有試過像你剛纔提到的一個佈局，你可以嘗試這裏提到的技術（切緣陰性）

http://www.alistapart.com/articles/negativemargins