3

Имеется колонна, высотой в 100% станицы. Сама страница то же 100%. В Колонне порядка десятка блоков высотой менее 10% (ну чтобы поместилось друг под другом и чуть чуть осталось на отступы :).

Хочется распределить эти блоки по всей высоте колонны.

Аналоги по горизонтали это способы типа text-align: justify + инлайновые потомки или display: table + display table-cell; А вот какой подход использовать по вертикали мне в голову что-то не приходит.

Условия и ситуации

Основной критерий классифицирующий ситуации - это количество блоков. Тут два варианта: либо количество блоков известно (будем брать 10 для примера), либо не известно. Но во втором случае можно говорить о том, что количество блоков не убегает далеко от 10-ти.

  1. Количество блоков известно. Создаем список высотой в 100%. Элементам списка выставляем высоту в 10%. Внутри вертикальное выравнивание и один из блоков. Тут все понятно.
  2. Количество блоков не известно. Высота блока известна.
  3. Количество блоков не известно. Высота блока неизвестна.
  4. Количество блоков не известно. Высота блока неизвестна. Требуется, чтобы при уменьшении высоты страницы, по достижению предела (когда блоки уже вплотную сели друг на друга) появлялся вертикальный скролл в окне браузера и страница переставала сжиматься.

Давайте обсудим :) У кого какие мысли по 2-4?.

P.S. Можно на уровнее идей. Код я набью, когда что-нибудь придумаем.

UPD: Cпособ с display: table я зря сразу откинул. Он одинакого хорошо подходит как для пропорционального выравнивания по горизотали, так и по вертикали. Во втором случае не обойтись без display: row; и, следовательно, лишнего тэга, но результат того стоит. Плюс легко использовать вертикальное выравнивание уже внутри клетки для блока.

6
  • 2
    display: table; и производные от него - варианты не кроссбраузерные. Это касается не только осла ниже восьмой версии, но и некоторых нормальных браузеров, где свойство работает, но с багами. А вы рассматриваете варианты только на html+css? Потому что использование JS - достаточно легко решает эти задачи.
    – Deonis
    10 окт 2012 в 22:28
  • Насчет кроссбраузерности вы заставили меня задуматься. В натоящем проекте требование принимать во внимание только последние стабильные версии большой четверки. В остальных случаях буду более внимательнее :). Если есть информация подробнее под рукой типа статейки тестов, подкиньте :). В плане JS я слабоват, следовательно это займет существенно больше времени. Хотя алгоритм представляю и при необходимости напишу :) Плюс хотелось бы из HTML+CSS выжимать по максимому, перед применением JS. В рамках разумного конечно.
    – Cypher
    10 окт 2012 в 22:38
  • 1
    @Cypher, > ...принимать во внимание только последние стабильные версии большой четверки...в этом случае для беспокойства нет причин )) Смело используйте table и иже с ним. В остальном, можно глянуть таблицу, в которой приведены свойства table, table-* и отношение к ним браузеров. (в самом низу страницы, описание возможных проблем)
    – Deonis
    10 окт 2012 в 22:45
  • Спсибки :)
    – Cypher
    10 окт 2012 в 22:50
  • 1
    P.S. Кстати говоря, есть интересный ресурс, который определяет свойства CSS, которые поддерживает ваш браузер. Если определенный браузер у вас установлен, то зайдя по указанной ссылке, он выдаст объективный результат именно для вашей установленной версии.Да, может не совсем удобно будет заходить с каждого из четырёх играющих роль браузеров, но всё же...
    – Deonis
    10 окт 2012 в 22:50

1 ответ 1

2

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

$('#container').masonry({
  itemSelector: '.box'
});

где #container - это идентификатор блока в котором лежат блоки, а .box - класс для самих блоков. Вот пример того, что примерно получится

2
  • Выглядит интересно. Если еще раз встанет проблема с более жесткими требованиями, внимательно посмотрю :). Спасибо. Ваш ответ, кстати, пригодился бы вот тут еще: hashcode.ru/questions/151487/…
    – Cypher
    11 окт 2012 в 9:18
  • 1
    Спасибо - там тоже отписался, может поможет кому)) 11 окт 2012 в 9:28

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими пользовательским соглашением, политикой конфиденциальности и политикой о куки

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.