2010-10-12 1 views
4

У меня возникли проблемы с разбиением экрана на 4 divs с шириной и высотой 50%. Нет проблем, чтобы получить 50-процентную ширину и поплавать вокруг, но как я могу заставить каждую из них иметь высоту 50% экрана?Разделить экран на 4 прямоугольника с 50% высотой 50% ширины

ответ

10

Предполагаю, что вы использовали для установки ширины; хорошо то же самое можно использовать для вашего роста.

Например:

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

dont't получить причину, почему elemts растягиваться теперь к высоте 50%. Но они это делают. –