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

Question

[AlinaMoskaluk]

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


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;
}

Comments

[Alex]

Сделайте демо в песочнице.

[Сергей Романенко]

вот тут дело соберите https://jsfiddle.net и потом кидайте ссылку на пример сюда

[AlinaMoskaluk]

Сергей Романенко, тут можно посмотреть kukoba1.av.fvds.ru/info-pole/k-chemu-privodyat-vre...

[AlinaMoskaluk]

Сергей Романенко, https://jsfiddle.net/tL8rmnek/11/

[AlinaMoskaluk]

Alex, https://jsfiddle.net/tL8rmnek/11/

Answer 1

[Андрей Мартынкевич]

Если я правильно понял, то вот два примера решения вашей проблемы:
1) https://jsfiddle.net/tgbjy73n/3/
2) https://jsfiddle.net/nvq7kwLh/6/

Answer 2

[Vladislav]

Вариант на гридах, вот генератор гридов https://basicweb.ru/css/grid_generator.php сделай такую же разметку блоков в генераторе

Answer 3

[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 убираем  */
}