將屏幕拆分爲50％寬度爲50％寬度的4個矩形

我無法將屏幕拆分爲寬度和高度均爲50％的4個div。獲得50％的寬度並將它們浮起來不成問題，但我怎樣才能讓它們中的每一個具有50％的屏幕高度？將屏幕拆分爲50％寬度爲50％寬度的4個矩形

2010-10-12 Sven Klouem

我認爲你已經習慣了設置你的寬度;同樣的事情可以用於你的身高。

例如：

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

來源

2010-10-12 22:14:42

Dont't得到的原因，爲什麼現在elemts拉伸至50％的高度。但他們這樣做。 – 2010-10-12 22:39:48

將屏幕拆分爲50％寬度爲50％寬度的4個矩形

回答

相關問題