Картинки разных размеров в ровный ряд

163

02 апреля 2018, 22:12

Хочу сделать картинки(плитку) как на примере

Использую bootstrap 4. Мой код, до другого пока не додумался:

<div class="card-columns">
<div class="card">
<img src="images/2.jpg" class="card-img img-fluid yey">
</div>
<div class="card">
<img src="images/2.jpg" class="card-img img-fluid yey">
</div>
<div class="card">
<img src="images/2.jpg" class="card-img img-fluid yey">
</div>
<div class="card">
<img src="images/2.jpg" class="card-img img-fluid yey">
</div>
<div class="card">
<img src="images/4.jpg" class="card-img img-fluid yey">
</div>
<div class="card">
<img src="images/2.jpg" class="card-img img-fluid yey">
</div>
<div class="card">
<img src="images/2.jpg" class="card-img img-fluid yey">
</div>
</div>

Получается такое:

Что я делаю не так? Почему последний квадрат не стал на пустое место. Как правильно написать код?

Answer 1

<div class="wrap">
  <div class="col">
    <div class="col__item"></div>
    <div class="col__item"></div>
  </div>
  <div class="col">
    <div class="col__item"></div>
    <div class="col__item"></div>
  </div>
  <div class="col">
    <div class="col__item col__item_stretch"></div>
  </div>
  <div class="col">
    <div class="col__item"></div>
    <div class="col__item"></div>
  </div>
</div>

.wrap{
  display: flex;
  background: #ccc;
  padding: 5px;
}
.col{
  display: flex;
  flex-direction: column;
  &__item{
    display: flex;
    width: 100px;
    height: 100px;
    margin: 5px;
    background: #f00;
    &_stretch{
      flex: 1;
    }
  }
}

ПОСЛЕДНИЕ ВОПРОСЫ

Все вопросы

ТОП-10

Все популярные вопросы

Непонятное поведение JS

ВОПРОС ПОПРАВЛЕН И УТОЧНЕН!

209

HTML

Как поместить на задний фон?

Здравствуйте, вот такая проблема! Есть всплывающее окно, но оно отображается на фоне сзади некоторых объектовПрописывал z-index, но он не помогает,...

208

HTML

Вывод товаров списком или сеткой

Здравствуйте! На сайте есть вывод товаров сеткой (те

233

HTML

Как ограничить область для клика? JS

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

189