В общем, стоит задача сделать галерею для портфолио, блоки располагаются ровно один под одним
но по макету нужно чтоб они заплывали друг под друга вот так, подскажите, пожалуйста, как это реализовать? заранее спсибо
Stack Overflow на русском — это сайт вопросов и ответов для программистов. Присоединяйтесь! Регистрация займёт не больше минуты.
Присоединиться к сообществуВоспользуйтесь column-count
, так мы будем знать, сколько у нас column
в каждом размере экрана и сможем управлять нашим responsive
, column-fill: auto;
даст нам высоту div
такой, какая она есть, потому что, мы не знаем заранее нашу высоту дива. Пользователь может написать 1 строку или 10 - ответ найдете пример1 и пример2 надеюсь помогло
Просто положите нужные вам блоки в одну колонку.
Если что высоту элементам можно не задавать, это просто для демонстрации. Пример для демонстрации:
div {
color: white;
}
.column {
float: left;
width: 300px;
}
.one {
background-color: orange;
height: 100px;
}
.two {
background-color: lime;
height: 150px;
}
.three {
background-color: #ccc;
height: 150px;
}
.four {
background-color: purple;
height: 250px;
}
<div class="column">
<div class="one">
One
</div>
<div class="three">
Three
</div>
</div>
<div class="column">
<div class="two">
Two
</div>
<div class="four">
Four
</div>
</div>
column-count
согласен, но это решение тоже подходит.
26 дек 2016 в 9:57