Как сверстать блоки плиткой?

572
31 декабря 2016, 15:40

Есть несколько div-блоков:

<div id="wrapper">
    <div class="item"></div>
    <div class="item"></div>
    <div class="item"></div>
</div>

Как сверстать блоки, чтобы они встали таким образом:

Блоки могут быть произвольной высоты, в зависимости от контента. Если применять к блокам свойство float: left, то нижние блоки выравниваются по нижней границе самого высокого блока в первом ряду.

Answer 1

Вариант 1:

.flexboxes { 
  display: flex; 
  flex-wrap: wrap; 
  height:200px; 
  flex-direction: column; 
} 
.flexboxes > div {width:200px;background-color:red;margin:3px;} 
.block0 {height: 60px;} 
.block1 {height: 80px;} 
.block2 {height: 70px;} 
.block3 {height: 90px;} 
.block4 {height: 80px;} 
.block5 {height: 100px;}
<div class="flexboxes"> 
  <div class="block0"></div> 
  <div class="block1"></div> 
  <div class="block2"></div> 
  <div class="block3"></div> 
  <div class="block4"></div> 
  <div class="block5"></div> 
</div>

Вариант 2 (с использованием скриптов):

$(function() { 
  $('.flexboxes').masonry({ 
    itemSelector: 'div' // обращаемся к пунктам 
  }); 
});
.flexboxes { 
  display: flex; 
  flex-wrap: wrap; 
  height:200px; 
  width: 630px; 
} 
.flexboxes > div {width:200px;background-color:red;margin:3px;} 
.block0 {height: 60px;} 
.block1 {height: 80px;} 
.block2 {height: 70px;} 
.block3 {height: 90px;} 
.block4 {height: 80px;} 
.block5 {height: 100px;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
<script src="http://masonry.desandro.com/masonry.pkgd.js"></script> 
 
<div class="flexboxes"> 
  <div class="block0"></div> 
  <div class="block2"></div> 
  <div class="block4"></div> 
  <div class="block1"></div> 
  <div class="block3"></div> 
  <div class="block5"></div> 
</div>

Answer 2

Столбцами?

.column {
  display: inline-block;
  width: 33%;
  margin-right: .3333%;
}

https://jsfiddle.net/psmhwqq7/

READ ALSO
Реализация автоподтягивания блока на react
CSS

Реализация автоподтягивания блока на react

Здравствуйте, есть список который имеет раскрывающийся блоки, нужно сделать так чтобы при раскрытии блок подтягивался по всей высоте, может...

 485
Вызов QMessageBox::critical()
c++

Вызов QMessageBox::critical()

Есть класс, не унаследованный от QWidgetПредставляет собой класс реализации доступа к БД

 473
Зачем нужен const в сигнатуре функции?
c++

Зачем нужен const в сигнатуре функции?

Например, у меня есть следующий код

 613
Ошибка с памятью [требует правки]
c++

Ошибка с памятью [требует правки]

Здравствуйте! Не могу найти ошибку в программе, на моем компьютере все нормально работает, на сервере - нетПоможете?

 421