Показать сообщение отдельно
  #1 (permalink)  
Старый 25.04.2012, 11:45
Профессор
Отправить личное сообщение для Маэстро Посмотреть профиль Найти все сообщения от Маэстро
 
Регистрация: 02.07.2010
Сообщений: 642

Как правильно использовать стиль float?
На экране необходимо расположить прямоугольники (для простоты все одинакового размера) таким образом, чтобы они заполняли доступное пространство окна браузера. Если применить к прямоугольникам (DIV_ам) стиль float:left, то всё понятно и красиво. Вот код:
<html>
<body style="overflow:hidden">
<script>
var m = document.createElement('DIV');  
m.style.cssText = 'height:300px; width:100%; background-color:#CCCCFF; overflow:hidden';
document.body.appendChild(m);    
  
function one(i)
{
var d = document.createElement('DIV');
    d.style.cssText = 'height:20pх; width:100px; margin:5px; text-align:center;  background-color:#FFAAAA; float:left';
d.innerHTML = i;
m.appendChild(d);  
};

function test()
{
for (var i=1; i <= 100; i++) one(i);
};  
  
test();
</script>
</body>
</html>

В данном случае прямоугольники выстраиваются слева направо по горизонтали и при достижении правого края экрана построение идет вниз.
А мне надо, чтобы прямоугольники выстраивались сверху вниз и при достижении нижнего края экрана построение продолжалось слева направо. Скроллера не должно быть.
Использование float:top естественно дает другой эффект. Что-то не соображу, как сделать?
Ответить с цитированием