1

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

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

1 ответ 1

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>

Ваш ответ

Нажимая на кнопку «Отправить ответ», вы соглашаетесь с нашими условиями использования и подтверждаете, что прочитали и поняли наши политику конфиденциальности и нормы поведения.

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