Доброго времени суток! Возник следующий вопрос:

Имеем:

• рабочую область браузера (для примера пусть будет 800х600)
• несколько элементов DIV, которые необходимо расположить столбиком вниз, по всей высоте рабочей области браузера

Приведу пример. Если задать блочному элементу такой параметр как:


и разместить подряд, допустим, 10 таких элементов, то 8 из них будут стоять в горизональную линию, а два последующих - точно под ними (основываясь на примере выше).

Вопрос в следующем: можно ли как-то расположить эти элементы не в горизональном, а в вертикальном порядке? То есть, я хочу, что бы они распологались не слева на право, а сверху вниз. При этом, в зависимости от количества элементов и занимаемого ими пространства, все не поместившиеся в рабочей области браузера по (или в каком-то ином, родительском элементе) по вертикали элементы автоматически уходили вниз.

Если сказать совсем кратко, есть ли что-нибудь на подобии:


Для полной наглядности, нарисовал картинку с примером того, чего хочу добиться.

Присоединённый файл ( Кол-во скачиваний: 10 )
 sample.png 31,43 Kb

ширину контейнера в котором div-ы уменьшить нельзя?

Evghenusi, контейнером, в котором находятся DIV'ы (то есть, их родительский элемент) - может быть например BODY, соответственно, его ширина может изменяться динамически, путём изменения размера окна браузера пользователем.

При этом, в случае с

элементы переместятся в соответствии с шириной родительского элемента (то есть, расположатся по ширине). Хотелось бы добиться подобного функционала только "в столбик".

спасибо за объяснения.
WolfAlone, раз вы так хорошо понимаете что творится на странице, и не хотитет добавить ещё один div в качестве родительского указав ему ширину
который и будет следить за тем что бы не было более двух div-ов в ряд, то почему не напишете js скрипт?

есть конечно ещё вариант пропорционально увеличивать размеры дивов   , но вы откажетесь

Evghenusi, дело в том, что элементы должны распологаться в не 1 столбик, а динамически распределяться сначала по высоте, а потом по ширине экрана. Именно в этом "фишка" float'a. То есть, элементы сначала заполняют одну строку, потом вторую, третью и так далее... в зависимости от ширины родительского элемента. Для примера, можно считать например так:


Единственный способ добиться такого функционала - использовать JS?

Попробуй использовать media queries

Это сообщение отредактировал(а) $дмитрий - 12.2.2012, 01:13

$дмитрий, спасибо большое! Во истину мудрый совет! (даже не понимаю, как я упустил эту возможность из вида)

Теперь осталось только придумать, как изменять количество слоёв в столбике без использования JavaScript.

Только что прочёл следующее:



Видимо, от идеи (по крайней мере от лычки "без JavaScript") придётся отказаться... IE как обычно испортил всю "картину маслом"...

Благодарю всех за помощь! $дмитрий, свою благодарность выражаю "плюсом".

Думаю, вопрос можно закрыть. Будем ждать HTML-6