如何用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