@AlinaMoskaluk

Как сделать, что бы в карточке товара при изменении элементов не менялась высота?

Есть карточки товара. Когда какой то элемент убрать они начинают прыгать . Как это исправить ? фото прикрепила
тут можно посмотреть https://jsfiddle.net/tL8rmnek/11/
602eda39e182a926159820.png

HTML
<div class="single-post__prod-item">
										<div class="stickers">
											<span class="stickers__item stickers__item_calc">1+4=3</span>
										</div>
										<img src="img/info-field/product.png" alt="">
										<h4 class="single-post__prod-item__title">Мармелад "Венское кафе" со вкусом карамели</h4>
										<p class="single-post__prod-weight">
											(180г)
										</p>
										<div class="single-post__pricing">
											<del></del>
											<span>200 ₽</span>
										</div>
										<a href="#" class="single-post__buy-btn">В корзину</a>
									</div>


CSS
.single-post__prod-item {
    position: relative;
    max-width: 210px;
    width: 100%;
    margin: 0 3px;
    border: 1px solid gainsboro;
}
.single-post__prod-item img {
    max-width: 205px;
    width: 100%;
    display: block;
    margin: auto;
}
.single-post__prod-item h4 {
    font-size: 13px;
    line-height: 20px;
    height: 80px;
    overflow: hidden;
    text-align: center;
}

.single-post__prod-weight {
    text-align: center;
}
.single-post__pricing {
    text-align: center;
    margin: 10px 0 20px;
}
.single-post__pricing del {
    font-size: 16px;
    height: 26px;
    display: block;
}
.single-post__pricing span {
    font-size: 24px;
    font-weight: 700;
}
.single-post__buy-btn {
    display: block;
    background: #ff9b25;
    color: #fff;
    font-weight: 700;
    height: 43px;
    line-height: 43px;
    text-align: center;
}
.single-post__buy-btn:hover {
    color: #fff;
    text-decoration: none;
}
  • Вопрос задан
  • 97 просмотров
Решения вопроса 1
AndrewMarty
@AndrewMarty
Верстальщик
Если я правильно понял, то вот два примера решения вашей проблемы:
1) https://jsfiddle.net/tgbjy73n/3/
2) https://jsfiddle.net/nvq7kwLh/6/
Ответ написан
Пригласить эксперта
Ответы на вопрос 2
SlavaMaxwell
@SlavaMaxwell
HTML-верстальщик
Вариант на гридах, вот генератор гридов https://basicweb.ru/css/grid_generator.php сделай такую же разметку блоков в генераторе
Ответ написан
fallus
@fallus
/* Все дочерние элементы этого flex-блока, которые находятся на одной горизонтали, становятся одной высоты  */
.single-post__prod{ align-items: stretch; }

/* Карточка товара становится Флексом, в колонку. Чтобы можно было позиционировать её дочерние элементы */
.single-post__prod-item {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: flex-start;
}

.single-post__prod-item > * { width: 100% } /* все дочерние элементы чтобы были во всю ширину */

.single-post__prod-item img {
    margin: 0 auto; /* заменил margin: auto */
}

.single-post__prod-weight,
.single-post__pricing{
margin-top: auto; /* Делаем так, чтобы этот блок и все блоки, которые ниже него, были прилеплены книзу */
}

.single-post__prod-weight + .single-post__pricing{
margin-top: 0; /* Если существует single-post__prod-weight, то у single-post__pricing margin-top убираем  */
}
Ответ написан
Ваш ответ на вопрос

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

Войти через центр авторизации
Похожие вопросы
26 февр. 2021, в 22:16
10000 руб./за проект
26 февр. 2021, в 21:56
20000 руб./за проект