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

Question

Верстаю каталог с товарами - сверху наименование товара, снизу картинка. В зависимости от количества текста, картинка начинает сьезжать вниз. Как это исправить? Юзаю css + bootstrap 5

<div class="col-md-3 col-sm-6"> <?php if ( has_post_thumbnail()) { ?>
        <div class="element"> 
                <div class="title"><?php the_title(); ?></div>
                <div class="thumbnailPic">
                        <a href="<?php the_permalink(); ?>" title="<?php the_title_attribute(); ?>" >
                            <div class="thumbnailPicWrap">
                                <div class="pic"><?php the_post_thumbnail(); ?></div>
                            </div>  
                        </a>
                </div>      
                <?php } ?>  
        </div>
</div>

Answer 1

Наверное как-то так

.center {
  display: flex;
  align-items: end;
}

.block-inside {
  padding: 64px;
  margin: 6px;
  border: 2px solid #000;
}

<div class="center">
  <div class="block">
    <div class="text">Тект в 1 строку</div>
    <div class="block-inside">Picture</div>
  </div>

  <div class="block">
    <div class="text">Тект в <br>2 строки</div>
    <div class="block-inside">Picture</div>
  </div>

  <div class="block">
    <div class="text">Тект в <br>3<br> строки</div>
    <div class="block-inside">Picture</div>
  </div>

  <div class="block">
    <div class="text">Тект <br>в <br>4<br> строки</div>
    <div class="block-inside">Picture</div>
  </div>
</div>

БЛОГ НА HUSL

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

Ответы (1 шт):