CSS: как вертикально прижать друг к другу несколько рядов блоков, разных по ширине?

Question

[Станислав]

По сути, весь вопрос описан показанным выше скриншотом. Структура в коде выглядит так:

Answer 1

[Даниил]

В похожих ситуациях можно воспользоваться плагином "Masonry".

Comments

[Станислав]

Честно говоря, не помню уже толком, как я решил именно эту задачу, но натыкался и на это решение, да. Спасибо!

Answer 2

[barkalov]

Либо использовать flex-верстку, но старые браузеры её не понимают.
Либо верстать в три вертикальных колонки (и поровну их заполнять скриптом), но тогда не будет работать float: left и на узком экране блоки не будут "сворачиваться" на следующую строку.

UPD: У вас там bootstrap3, судя по скриншоту (плохо видно). Попробуйте не оборачивать каждый блок в row (или как там у вас сделано) а сложите все блоки в один контейнер - они должны автоматически флоатиться (почти) как вам нужно.

Comments

[Станислав]

За flex спасибо, интересно, но не очень понял, как это можно тут применить, исходя из мануала. По поводу bootstrap - все верно, но там эти блоки и обернуты в одном контейнере, посмотрите на втором скриншоте, article - это они и есть.

[Станислав]

Впрочем, нашел как использовать flex, но при этом нужно ограничивать как-то вертикальную высоту контейнера. Код такой:

.wrapper {
display: -webkit-box;
display: -moz-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

flex-wrap: wrap;
align-content: flex-start;
justify-content: flex-start;
flex-direction: column;

width: 1200px;
height: 800px;
}

.main {
align-self: flex-start;
margin: 10px;
border: 1px solid black;
background: deepskyblue;
width: 300px;
}

[barkalov]

@lamo4ok C бутстрапом действительно не флоатится нармально, я проверил. А был уверен, что оно работает как нужно (вообще оно работает, но только если большой блок идет первым).
С флеексом как именно быть не подскажу - сам стараюсь его избегать, боюсь немного. :) Но знаю что можно, видел примеры.

[Станислав]

@barkalov я последовал примеру, который ниже привел @ModestesGonze - и так тоже получилось. Но и твой ответ тоже верный, если использовать flex как я выше написал и очистить стили от бутстрапа.

[Станислав]

@SelenIT2 спасибо и за эту версию, оформили бы отдельным ответом - отметил бы и ваше решение как верное ;)

Answer 3

[ModestesGonze]

Уберите row как советует barkalov и сложите блоки в один контейнер, только вместо float используйте

display: inline-block;
vertical-align: top;

так у вас хоть будет контроль над последовательностью блоков

Comments

[Станислав]

Так у меня row - только на контейнере для тех блоков, которые нужно выровнять, контейнер - div, блоки - article.

[ModestesGonze]

Я вас не правильно понял. В таком случае делайте вертикальными колонками.

[ModestesGonze]

Пример накидал jsfiddle.net/4L6ge

Answer 4

[Анна Бакурова]

float: left? Или Я не поняла конечной картины что вы хотите

Comments

[Станислав]

Чтобы обозначенное на первом скриншоте место занялось блоком, который ниже него.

[Анна Бакурова]

ну так флоаты это и делают. Почему их не используете

[Станислав]

Приведите пример css для контейнера и элементов внутри него, пожалуйста, я не понимаю как вы предлагаете с помощью float решить эту проблему.