Как уложить div'ы последовательно столбцами, а не строчками?

[inoxxx]

Как сделать кроссбраузерную вёрстку такого набора div?

То есть имеется контейнер — div фиксированной высоты (в данном случае на 3 маленьких блока).

В него нужно последовательно "укладывать" блоки столбцами по 3.

Причём количество блоков заранее не известно, то есть классический табличный метод (строками) не годится.

Перебрал кучу вариантов, пока не получается.

в идеале сделать это без дополнительных контейнеров, просто div подряд.

[psywalker]

Могу предложить только список из трёх пунктов, в каждом из которых будут уложены нужные блоки.

[inoxxx]

В принципе решил проблему, но с участием дополнительного контейнера, а хотелось бы без

.dd {
	display: inline;
	width: 100px;
	position: relative;
	float: left;
}
.bb {
width: 100px;
height: 100px;
display: block;
}

dd — подконтейнер

bb — "кирпичики"

всё это в общем контейнере с нужной высотой (по количеству рядов).

[psywalker]

В принципе решил проблему, но с участием дополнительного контейнера, а хотелось бы без

.dd {
	display: inline;
	width: 100px;
	position: relative;
	float: left;
}
.bb {
width: 100px;
height: 100px;
display: block;
}

dd — подконтейнер

bb — "кирпичики"

всё это в общем контейнере с нужной высотой (по количеству рядов).

Дружище, а ты не мог бы привести тестовую страницу пожалуйста.

[inoxxx]

Дружище, а ты не мог бы привести тестовую страницу пожалуйста.

Собственно, CSS я написал, вот сам блок начиная с контейнера

<div style="height:300px; width: 100%">
<div class="dd">
<div class="bb"><img src="black.gif" width="100" height="100"></div>
<div class="bb"><img src="black.gif" width="100" height="100"></div>
<div class="bb"><img src="black.gif" width="100" height="100"></div>
</div>
<div class="dd">
<div class="bb"><img src="black.gif" width="100" height="100"></div>
<div class="bb"><img src="black.gif" width="100" height="100"></div>
<div class="bb"><img src="black.gif" width="100" height="100"></div>
</div>
</div>

чёрные гифы в ячейках просто для примера, контент может быть любой. Также можно задать отступы.

[PanSoul]

А можно было бы поизвращаться и сделать через <ul> или <dl>

Я, конечно, не пробовал, но может это даже и не извращения - а выход?!

Edited April 15, 2011 by PanSoul

[Searcher]

возможно, найдется ответ в одной старой теме.

[psywalker]

Собственно, CSS я написал, вот сам блок начиная с контейнера

<div style="height:300px; width: 100%">
<div class="dd">
<div class="bb"><img src="black.gif" width="100" height="100"></div>
<div class="bb"><img src="black.gif" width="100" height="100"></div>
<div class="bb"><img src="black.gif" width="100" height="100"></div>
</div>
<div class="dd">
<div class="bb"><img src="black.gif" width="100" height="100"></div>
<div class="bb"><img src="black.gif" width="100" height="100"></div>
<div class="bb"><img src="black.gif" width="100" height="100"></div>
</div>
</div>

чёрные гифы в ячейках просто для примера, контент может быть любой. Также можно задать отступы.

Спс!

[Veseloff]

А вот мне интересно к чему такие извращения? То, что я вижу является таблицей и верстать это надо при помощи table. Я так думаю.

[sigma77]

В принципе решил проблему, но с участием дополнительного контейнера, а хотелось бы без

.dd {
	display: inline;
	width: 100px;
	position: relative;
	float: left;
}
.bb {
width: 100px;
height: 100px;
display: block;
}

dd — подконтейнер

bb — "кирпичики"

всё это в общем контейнере с нужной высотой (по количеству рядов).

А мне не понятно нафига тут понамешаны и инлайн, и флоат, и еще релатив зачем-то примешан. А в дочерний блоках зачем-то еще ширина и display: block

[psywalker]

А мне не понятно нафига тут понамешаны и инлайн, и флоат, и еще релатив зачем-то примешан. А в дочерний блоках зачем-то еще ширина и display: block

Ну да, если говорить в таком ключе, то вообще много чего можно было бы и убрать. Например те же классы внутри контейнеров, который там нафиг не нужны вообще.

[inoxxx]

А вот мне интересно к чему такие извращения? То, что я вижу является таблицей и верстать это надо при помощи table. Я так думаю.

Блоки должны заполнять последовательно столбцы слева направо. Общее количество их неизвестно. Вывод на PHP через div сделать гораздо проще, а тем более если бы удалось избавиться от контейнеров столбцов.

А мне не понятно нафига тут понамешаны и инлайн, и флоат, и еще релатив зачем-то примешан. А в дочерний блоках зачем-то еще ширина и display: block

У меня это единственная работающая кроссбраузерная комбинация, при которой не полностью заполненные ячейки не деформируются.

Если предложите работающий сокращённый вариант - буду благодарен.

[Temiks]

А вот мне интересно к чему такие извращения? То, что я вижу является таблицей и верстать это надо при помощи table. Я так думаю.

+ 1

[psywalker]

У меня это единственная работающая кроссбраузерная комбинация, при которой не полностью заполненные ячейки не деформируются.

Если предложите работающий сокращённый вариант - буду благодарен.

Не, а ты просто объясни плиз, зачем ты повесил position: relative;

с display: inline; + на другой заведомо блочный блок повесил display: block ?

[LESTAD]

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

[swetlana]

Вообще не понимаю, о чём обсуждение.

Вот так это делается:

<!DOCTYPE html>
<meta charset="utf-8">
<title>9 блоков</title>
<link rel="stylesheet" href="style.css">

<div>1</div>
<div>2</div>
<div>3</div>
<div>4</div>
<div>5</div>
<div>6</div>
<div>7</div>
<div>8</div>
<div>9</div>

И ведь работает: http://swetlanabayer.ru/blog/examples/9/

и никаких контейнеров не надо.

И кроссбраузерно: в последних версиях всех популярных браузеров всё как надо.

Надеюсь, никто не принял этот мой пост всерьёз.

[LESTAD]

на 7 IE не работает, а так интересный вариант... . Щас спать уже, завтра надо бует по разбираться, у меня пока только 1 вопрос, он будет работать при тянущемся режиме??

[Serlutin]

Вообще не понимаю, о чём обсуждение.

Вариант, с абсолютом, конечно, хорош, но он немного противоречит:

Причём количество блоков заранее не известно

Конечно, можно заранее прописать ещё сразу стили для других блоков, но это тоже как-то не очень.

Edited April 16, 2011 by Serlutin

[psywalker]

Вариант, с абсолютом, конечно, хорош, но он немного противоречит:

Чем он хорош, не пойму? Тем, что не пашет даже в ИЕ8?

[Serlutin]

Тем, что не пашет даже в ИЕ8?

position: absolute не пашет в ИЕ8?

А nth-child можно заменить на классы.

Хотя всё-таки почему не таблица?

[psywalker]

А nth-child можно заменить на классы.

А если блоков будет много, очень много?

[Serlutin]

А если блоков будет много, очень много?

Тогда браузер повиснет от количества элементов, и пользователь больше не зайдёт на этот сайт :-)

Если серьёзно, то любой из вариантов требует вмешательства в код. Если количество блоков заранее не известно, то можно предположить, что они будут добавляться движком. Тогда каждому блоку можно генерировать id и там уже позиционировать. Хотя, да. Вариант с дополнительным обёрточным блоком лучше.

Ещё есть вот такой вариант (работает только в Chrome, FF и последних версиях Opera 11.10 и Safari):

http://serlutin.nxt.ru/example/multi-column.html

Но нужно дождаться, когда вымрет IE9

Edited April 16, 2011 by Serlutin

[swetlana]

неужели всё-таки приняли всерьёз?

Ни в коем случае этого делать не следовало.

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

А если на IE вообще забить (даже на устаревшие IE9 и IE10, а не только на безнадёжно устаревшие IE7 и IE8), то может быть можно поиграться с columns например. Хотя это, вроде и не совсем то.

Надо будет почитать, можно ли не задавать количество колонок, и ограничивать ен ширину их, а высоту. Может и нет.

А на практике дополнительный контейнер тут будет меньшим из зол.

[Serlutin]

то может быть можно поиграться с columns например. Хотя это, вроде и не совсем то.

Надо будет почитать, можно ли не задавать количество колонок, и ограничивать ен ширину их, а высоту. Может и нет.

Постом выше ведь пример выложил :-) http://serlutin.nxt.ru/example/multi-column.html

[swetlana]

[flood]

Serlutin, сударь, вы мой двойник?

Уже который раз излагаете мои мысли прямо перед моим сообщением

[/flood]

Постом выше ведь пример выложил :-) http://serlutin.nxt.ru/example/multi-column.html

в этом примере как раз задано количество колонок.

А если количество блоков заранее неизвестно, но надо их выстраивать по три в колонку, то и количество колонок, получается, неизвестно.

Сейчас читаю и не вижу такой возможности пока.

[Serlutin]

А если количество блоков заранее неизвестно, но надо их выстраивать по три в колонку, то и количество колонок, получается, неизвестно.

column-count указывает количество

column-width указывает ширину

Если одно из значений не задано, то оно задаётся автоматом. Поэтому если мы точно знаем ширину, то кол-во колонок выстроится автоматически. Плюс вроде бы есть возможность прерывать колонку, но не знаю точно работает или нет.