Как выровнять цены с помощью css?

Question

[Ivan23423]

Появилась такая проблема, что цены на сайте расположены не в одну строку со всеми, в общем, цены просто прыгают.
Как можно сравнять цены, чтобы такого не было?
Фото, как это сейчас выглядит -

Comments

[Михаил]

для карточки
flex
flex-direction column

для цены margin-top auto

[Антон]

1. Напишите кусок html и css кода.
2. Bootstrap используете?

[Ivan23423]

Антон Алексеевич, нет, это шаблон вордпресса, могу ссылку на сайт кинуть https://hypestuff.org/

[Антон]

Ivan23423, в ответе написал, что нужно сделать. Получится примерно такая картина (я просто сделал название повторяющимся, чтобы расширить блок для наглядности работы стилей.:

Answer 1

[Artyom]

Как вариант, задай position absolut и bottom 0,left 0

Comments

[Ivan23423]

Спасибо, помогли

Answer 2

[Антон]

.owl-stage {
    display: flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    align-items: stretch;
    -webkit-align-items: stretch;
}

.owl-carousel-item {
    height: 100%;
    display: flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    flex-direction: column;
}

.owl-item .price {
    display: flex;
    display: -moz-box;
    display: -ms-flexbox;
    display: -webkit-flex;
    justify-content: center;
    -webkit-justify-content: center;
    margin-top: auto;
    margin-bottom: 0;
    font-size: 15px;
    line-height: 1.3;
}

Что касается html, то нужно span.price вынести из .product-grid-item и добавить ниже этого блока.

Answer 3

[Арсений Матыцин]

Заверни все все во flex-строки, в них по умолчанию высота всех элементов одинаковая, зависящая от большего в строке (stretch). И карточки тоже сделай флексами. Это позволит с помощью margin-top: auto заданным цене оттолкнуть ее в конец карточки. Карточка должна быть flex-direction: column.

Answer 4

[Назарий Лазарчук]

Самый простой вариант, это сделать в контейнере с назвой (там где написано адидас)

...
position: relative;
padding-bottom: ...;

а цену указать так:

...
position: absolute;
bottom: 0;

Я недавно делал так в проекте, можешь посмотреть тут

Answer 5

[Артур Белан]

Я бы под grid всё переделал с ним легко работать и такие проблемы не возникают.
Советую обратить внимание на такой метод!

Answer 6

[vitalypanchenko1]

Каждый товар сделать флексбоксом, установить flex-direction:column, внутри создать 3 дива, для картинки, названия и цены, задать конкретные размеры всем 3 внутренним дивам. Текст в блоке с ценой выровнять как надо.