如何用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>
-
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>
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
andtop:42px
define the tiled layout.
<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>
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屋!