Знающие люди, подскажите.

Доброго времени суток. Вопрос собственно вот в чем:

Имеются блоки одинаковой ширины и динамической высоты, как сделать их построение вот таким образом?

Код должен быть примерно вот таким:



















Комментарии пользователей

EasyBeaver

Привет пинтерест ) Делается с помощью абсолюта и js. Библиотека Isotope в этом поможет: http://isotope.metafizzy.co/

17
17

Я не верстальщик, так что не ручаюсь за результат, но зато работает aa2008ba6c748b1800363873b6f53492.png

eLevin

Привет пинтерест ) Делается с помощью абсолюта и js. Библиотека Isotope в этом поможет: http://isotope.metafizzy.co/
Спасибо) Этим способом воспользуюсь конечно, но хотелось реализовать на CSS, после нескольких часов раздумий я пришел к выводу что на html и css сделать не получится или же просто уже голова не соображает.

17
17

P.S.: Две строчки с display из css можно удалить — они не нужны )

eLevin

Я не верстальщик, так что не ручаюсь за результат, но зато работает
Ваш вариант не подходит, вывод будет происходить примерно в том виде, в котором я написал пример, сделать такое разделение по колонкам можно будет только jsом, но от работы с js я хотел уйти, теперь понимаю что врядли получится.

Enfilade

не понял, а в чём проблема сделать так в css, зачем здесь js ?

Enfilade

т.е. код должен быть обязательно таким:

EasyBeaver

Вопрос: на какие браузеры ориентирован проект?

eLevin

не понял, а в чём проблема сделать так в css, зачем здесь js ?
Подсказали бы как)
т.е. код должен быть обязательно таким:
Да, никаких делений на доп. колонки, как в примере у 17, не должно быть.
Вопрос: на какие браузеры ориентирован проект?
IE от 8, Хром, Опера, мозила

EasyBeaver

Могу посоветовать такой вот нативный и простой вариант для современных браузеров. colls.png Ну а для тех кто не поддерживает данное свойство - подключать изотоп.

eLevin

EasyBeaver, спасибо за помощь. Заказчик сказал делать так, а потом просто изменит вывод.

EasyBeaver

EasyBeaver, спасибо за помощь. Заказчик сказал делать так, а потом просто изменит вывод.
Да не за что. Рад помочь! Спасибо 17, за то что навел на мысль =)

17
17

Спасибо 17
:)