Выровнять блоки по высоте

140

31 января 2021, 04:10

Предварительно прошу прощения за примитивный вопрос, но я в тупике) Пытаюсь разобраться с Bootstrap 4 и сверстать примитивную карточку товаров, за пример взял сайт dodopizza.ru. У меня не получается выровнять элементы блоки по высоте. Как сделать так, чтоб блоки выравнивались по <div class="product__size-control">, чтоб сетка выглядела так: . Данного эффекта я добился указывая height для классов good_info и good_name явно - это криво. Как добиться этого эффекта корректным способом, адаптивно, с помощью Bootstrap.

вот код: https://jsfiddle.net/Slav4ka/eLf7283q/3/

Answer 1

Пример упростил, но принцип тот же

.wrap { 
  display: flex; 
} 
 
.item { 
  display: flex; 
  flex-direction: column; 
  justify-content: space-between; 
  align-items: center; 
  flex-grow: 1; 
  flex-basis: 0; 
} 
 
.item img { 
  width: 100px; 
} 
 
.item .description { 
  display: flex; 
  flex-direction: column; 
  align-items: center; 
}

<div class='wrap'> 
    <div class='item'> 
        <div class='description'> 
            <img src="https://dodopizza-a.akamaihd.net/static/Img/Products/Pizza/ru-RU/c6a8700b-b93e-43fc-945d-23b9bbfd4a7d.jpg" alt="example"> 
            <p>Lorem Ipsum</p> 
        </div> 
        <div class='price'> 
            <a href="#">buy</a> 
        </div> 
    </div> 
    <div class='item'> 
        <div class='description'> 
            <img src="https://dodopizza-a.akamaihd.net/static/Img/Products/Pizza/ru-RU/c6a8700b-b93e-43fc-945d-23b9bbfd4a7d.jpg" alt="example"> 
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p> 
        </div> 
        <div class='price'> 
            <a href="#">buy</a> 
        </div> 
    </div> 
    <div class='item'> 
        <div class='description'> 
            <img src="https://dodopizza-a.akamaihd.net/static/Img/Products/Pizza/ru-RU/c6a8700b-b93e-43fc-945d-23b9bbfd4a7d.jpg" alt="example"> 
            <p>Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's.</p> 
        </div> 
        <div class='price'> 
            <a href="#">buy</a> 
        </div> 
    </div> 
</div>