4

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

введите сюда описание изображения

Я для всех блоков открыл одну строку row, потом каждый блок поместил в col-lg-4

<div class="row">
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
    <div class="col-lg-4">
        <div class="gallery-item">
            ...
        </div>
    </div>
</div>

Но тогда получается вот так, как на картинке ниже, из-за того, что row имеет display: flex; и каждый col-lg-4 получается одинаковой высоты. А мне нужно как-то сделать чтобы колонки, которые снизу подсосались к верху, чтобы не было пустого пространства, и было все кирпичиками. Падскажите, пожалуйста, как правильно такое можно сделать?

введите сюда описание изображения

4
  • Какие стили применяли? Пробовали через 'display: inline-block' сделать?
    – DogeDev
    20 дек 2017 в 13:27
  • display: inline-block только что попробовал, тоже самое, колонки col ведь будут все равно одинаковой высоты. Можно было бы в одну колонку поместить по два блока, но тогда при интеграции WordPress будут небольшие сложности, так то ты просто берешь и выводишь через цыкл одинаковый код каждого блока из шаблона 20 дек 2017 в 13:38
  • masonry подключите и не мучайтесь
    – SVE
    20 дек 2017 в 15:17

1 ответ 1

4

Для данной задачи есть несколько решений.

Каждый столбец отдельным блоком

.el {
  background-color: gray;
  margin-bottom:5px;
}
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
   
<div class="row">
  <div class="col-xs-6">  
    <div class="el" style="height:30px"> </div>
    <div class="el" style="height:60px"> </div>
    <div class="el" style="height:110px"> </div>
  </div>
  <div class="col-xs-6">  
    <div class="el" style="height:80px"> </div>
    <div class="el" style="height:30px"> </div>
    <div class="el" style="height:40px"> </div>
 </div>
</div>

Количество элементов в каждом столбце надо будет рассчитать вручную.

Списком, и указать column-count

ul {
  column-count:2;
  list-style-type: none;
}

li {
  margin-bottom: 5px;
  background-color: gray;
}
<ul>
  <li style="height:30px"> </li>
  <li style="height:60px"> </li>
  <li style="height:20px"> </li>
  <li style="height:70px"> </li>
  <li style="height:120px"> </li>
  <li style="height:30px"> </li>
  <li style="height:50px"> </li>
  <li style="height:140px"> </li>
</ul>

В этом случае количество элементов в колонке указывать не надо, оно будет расчитано автоматически, зато адаптивность придётся прописывать вручную, через media query менять количество столбцов.

Flexbox

.container {
   display: flex;
   flex-wrap: wrap;
   flex-direction: column;
   height: 400px;
}

.el {
   background-color: gray;
   margin:4px;
}
<div class="container">
  <div class="el" style="height:30px"> </div>
  <div class="el" style="height:40px"> </div>
  <div class="el" style="height:50px"> </div>
  <div class="el" style="height:60px"> </div>
  <div class="el" style="height:110px"> </div>
  <div class="el" style="height:80px"> </div>
  <div class="el" style="height:90px"> </div>
  <div class="el" style="height:120px"> </div>
</div>

В данном решении высоту flex контейнера надо будет рассчитать вручную.

4
  • (+) хороший ответ, поздравляю со второй тысячей 21 дек 2017 в 2:25
  • 2
    @Alexandr_T Постарался сделать красивый и полный ответ. Спасибо. 21 дек 2017 в 9:00
  • Спасибо, большое , Дмитрий, ваш ответ мне очень помог 22 дек 2017 в 17:41
  • Спасибо, Дмитрий) 22 дек 2017 в 17:44

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.