0

Подскажите, как выровнять блоки? Я так понимаю они должны липнуть к нижнему краю, чтобы все в сетке стали на одном уровне. введите сюда описание изображения

Сайт где это пробую

3 ответа 3

0

добавьте 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; /* <!-- добавляем */
}
3
  • Спасибо!!!:-) Но этот вариант не подходит к сожалению... Когда в сетке продуктов будет ряд из 4-х коротких имён, то образуется некрасивый отступ.
    – Sylon
    22 ноя 2015 в 8:40
  • а можно ссылку на сайт, где это всё происходит. а то как-то в небе ковырять код не хочется *)
    – NeedH8
    23 ноя 2015 в 17:13
  • Под картинкой ссылка...:-) Изначально имя и цена не были в одном диве.
    – Sylon
    24 ноя 2015 в 23:33
0

Если 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>

1
  • Попробовал, что-то видимо мешает... Сейчас на сайте отображена попытка...
    – Sylon
    24 ноя 2015 в 0:17
0

Изменить разметку: class="price-box" поместить в class="actions". Тем самым цена будет привязана к нижней части с кнопкой "В корзину".

Ваш ответ

By clicking “Отправить ответ”, you agree to our terms of service and acknowledge that you have read and understand our privacy policy and code of conduct.

Всё ещё ищете ответ? Посмотрите другие вопросы с метками или задайте свой вопрос.