如何用CSS标记平铺布局？ [英] How to mark up a tiled layout with CSS?

问题描述

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

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

解决方案

您必须使用CSS属性
位置 ，
top ，
bottom ，
left ，
right 和
height 。
Eg

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


• 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 + 高度和resp。 left + width 一起工作。
您可以将更多的贴图添加到下一个顶部。

使用 overflow 你可以定义如果内容太多会发生什么。 overflow：auto 如果需要的话，在div上添加一个滚动条。 overflow：hidden 会剪裁它。

How to mark up the page without javascript?

Both HTML elements (div1, div2) must to have fixed size.

解决方案

You have to work with the CSS attributes position, top, bottom, left, right and 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 lets you determine the layout in pixels and percent (roughly speaking).
• left:0; right:0 make it full-width.
• top:0 aligns a div to the upper edge.
• bottom:0 aligns a div to the lower edge.
• height:42px and top:42px define the tiled layout.

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>

Notice how top+height resp. left+width work together. You could have more tiles as well by adding the previous height to the next top.

With overflow you can define what should happen if there is too much content. overflow:auto adds a scrollbar to the div if needed. overflow:hidden would crop it.

这篇关于如何用CSS标记平铺布局？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！