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

204
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;
    }
  }
}
READ ALSO
Непонятное поведение JS
HTML

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

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

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

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

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

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

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

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

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

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

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

 227