将屏幕拆分为50％宽度为50％宽度的4个矩形

问题描述：

我无法将屏幕拆分为宽度和高度均为50％的4个div。获得50％的宽度并将它们浮起来不成问题，但我怎样才能让它们中的每一个具有50％的屏幕高度？将屏幕拆分为50％宽度为50％宽度的4个矩形

答

我认为你已经习惯了设置你的宽度;同样的事情可以用于你的身高。

例如：

<html> 
<head> 
</head> 
<body> 

<div style="background-color:red; width:50%; height:50%; float:left"> 
</div> 

<div style="background-color:blue; width:50%; height:50%; float:right"> 
</div> 

<div style="background-color:green; width:50%; height:50%; float:left"> 
</div> 

<div style="background-color:orange; width:50%; height:50%; float:right"> 
</div> 

</body> 
</html>

如果你运行它，你将不得不在你的屏幕4个等份，与左上为红色，右上角是蓝色的，左下角是绿色，并且底部正在橙色。

编辑这适用于以下方式：

html,body { 
     padding:0; 
     margin:0; 
     height:100%; 
     min-height:100%; 
     }

Dont't得到的原因，为什么现在elemts拉伸至50％的高度。但他们这样做。 – 2010-10-12 22:39:48

将屏幕拆分为50％宽度为50％宽度的4个矩形

相关推荐