html - 如何用 CSS 标记平铺布局？

Question

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

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

Answer 1

您必须使用 CSS 属性 position、 top、 bottom、 left和 。例如rightheight

<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定义平铺布局。

垂直示例：

<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>

四个瓷砖的例子：

<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