如何使用CSS标记平铺布局？

Question

如何在没有javascript的情况下标记页面？

两个HTML元素（div1，div2）必须具有固定大小。

Answer 1

您必须使用CSS属性 position， top， bottom， left， right和 height。 E.g。

<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怎么回事。 left + width一起工作。 通过将之前的高度添加到下一个顶部，您可以拥有更多的平铺。

使用overflow，您可以定义如果内容太多会发生什么。如果需要，overflow:auto会向div添加滚动条。 overflow:hidden会裁剪它。

Answer 2

虽然我没有尝试过像你提到的那样的布局，但你可以试试这里提到的技术（负边距）。

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