@Ivan23423

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

Появилась такая проблема, что цены на сайте расположены не в одну строку со всеми, в общем, цены просто прыгают.
Как можно сравнять цены, чтобы такого не было?
Фото, как это сейчас выглядит - 5f01d45648c8e427622877.png
  • Вопрос задан
  • 447 просмотров
Решения вопроса 3
@ArtYarm
Как вариант, задай position absolut и bottom 0,left 0
Ответ написан
@Yadalay
Php, Mysql, Html, Css, Js/Jquery/Ajax, Laravel
.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 и добавить ниже этого блока.
Ответ написан
Комментировать
ArsenyMatytsyn
@ArsenyMatytsyn Куратор тега CSS
Руководитель frontend направления, предприниматель
Заверни все все во flex-строки, в них по умолчанию высота всех элементов одинаковая, зависящая от большего в строке (stretch). И карточки тоже сделай флексами. Это позволит с помощью margin-top: auto заданным цене оттолкнуть ее в конец карточки. Карточка должна быть flex-direction: column.
Ответ написан
Комментировать
Пригласить эксперта
Ответы на вопрос 3
@LazarchukNazar
Джаваскриптизер
Самый простой вариант, это сделать в контейнере с назвой (там где написано адидас)
...
position: relative;
padding-bottom: ...;

а цену указать так:
...
position: absolute;
bottom: 0;

Я недавно делал так в проекте, можешь посмотреть тут
Ответ написан
Комментировать
Belartale
@Belartale
Front-end week-junior developer
Я бы под grid всё переделал с ним легко работать и такие проблемы не возникают.
Советую обратить внимание на такой метод!
Ответ написан
Комментировать
@vitalypanchenko1
Каждый товар сделать флексбоксом, установить flex-direction:column, внутри создать 3 дива, для картинки, названия и цены, задать конкретные размеры всем 3 внутренним дивам. Текст в блоке с ценой выровнять как надо.
Ответ написан
Комментировать
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы