Как сделать чтобы было все плотно по высоте?

Например, есть 9 блоков div. Все одинаковые, со свойством float: left; и width: 33%;
Получается они будут стоять вот так:
d8f6c9f21e6247a3b18260762157e24f.png
Но так будет если высота всех блоков одинаковая, но если не одинаковая, получается хаос:
3eb018a633784656ad70226b2dbbbdb9.png
А нужно чтобы вот так:
f40bc4bc9df44437be33007a03937d6d.png
  • Вопрос задан
  • 2240 просмотров
Пригласить эксперта
Ответы на вопрос 2
mosaicflow
shapeshift
пример с masonry

Если без js, то
<div class="container">
  <img src="" alt="">
  <img src="" alt="">
  <img src="" alt="">
  ...
</div>

.container {
  column-count: N;
  -webkit-column-gap: 10px;
     -moz-column-gap: 10px;
          column-gap: 10px;
}

.container img {
  display: inline-block;
  width: 100%, 
}

column-gap - расстояние между колонками

Для правильного порядка в колонках формируем примерно такой вывод
for (var i = 0; i < N; i++) {
    for (var j = i; j < images.length; j+=N) {
      <img src="images[j].src"

, где N - количество колонок.

Еще есть возможность создать подобное используя flexbox
Раз
Два
Три

Но там не так всё хорошо иногда получается, как задумывается. Хотя у любого способа есть свои недостатки. Так что пробуйте разные варианты, может что-то и будет золотой серединой.
Ответ написан
AMar4enko
@AMar4enko
Вариант без js - делаете 3 одинаковые колонки, складываете в них дивы.
Вариант с js - берете masonry, izotope, blocksit, whatever и go code.
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы