Подскажите, как выровнять блоки? Я так понимаю они должны липнуть к нижнему краю, чтобы все в сетке стали на одном уровне.
3 ответа
добавьте min-height: 40px;
styles.css строка 4231
.products-grid .product-name, .products-list .product-name {
text-transform: uppercase;
margin-bottom: 5px;
font-size: 14px;
font-family: "Raleway", "Helvetica Neue", Verdana, Arial, sans-serif;
min-height: 40px; /* <!-- добавляем */
}
Если height
не устраивает, то видимо, без небольшого изменения разметки будет не обойтись.
Можно обернуть наименование продукта и цену в отдельный блок (relative
). Цену соответственно позиционировать (absolute
) со значением bottom: 0
Примерно таким образом:
.price_block {
position: relative;
min-height: 80px;
background: #ccc;
float:left;
width: 150px;
margin-right: 15px;
}
.price {
position: absolute;
bottom: 0;
}
h2 {
margin:0; padding:0;
font-size:18px;
}
<div class="price_block">
<h2><a href="#">MAX 1000</a></h2>
<div class="price">300,00 руб.</div>
</div>
<div class="price_block">
<h2><a href="#">GLUCOSAMINE MAX 750</a></h2>
<div class="price">300,00 руб.</div>
</div>
-
Попробовал, что-то видимо мешает... Сейчас на сайте отображена попытка...– Sylon24 ноя 2015 в 0:17
Изменить разметку: class="price-box" поместить в class="actions". Тем самым цена будет привязана к нижней части с кнопкой "В корзину".