Список - опустить (прижать) цену вниз карточки


Serg-24
 Поделиться

Рекомендуемые сообщения

 Пытался в Списке опустить (прижать) цену, чтОБы она была прижата к нижней части карточки, но как не пытался ставить vertical-align: bottom; - не желает эта команда выполняться. 

 Дело (то) в том, что при включенном Списке, у одного товара меньше текста с описанием а у другого больше текста с описанием - и если настроить отступ для нескольких строк (где описания всего 100 знаков) и от цены поставить в верх 100px - то это действует и на более длинное описание (в котором например 1500 символов) что смотрится не красиво.

 Как поступить?

Ссылка на комментарий
Поделиться на других сайтах

или просто задай минимальную высота параграфа с описанием, в расчете на максимальное число знаков

или

Попробуй так прописать стили стили для тэга p в котором цена выводится. типа того:

Скрытый текст
  1. display: inline-block;
  2. position: absolute;
  3. bottom: 60px;

В сетке работает нормально, в списке... не очень

Но тогда придется с блоком кнопок тоже что-то делать, т.к. цена выходит из потока

Ссылка на комментарий
Поделиться на других сайтах

30 минут назад, jaffagold сказал:

Попробуй так прописать стили стили для тэга p в котором цена выводится.

  Скрыть содержимое
  1. display: inline-block;
  2. position: absolute;
  3. bottom: 60px;

 

 Так разве может быть? Или CSS имеет др. свойства кодов...

position: absolute; - Прижимаем в верх + фиксируем (если зададим отступы - то выровняем) - а мне нужно не в верх прижимать... Как (же тогда при изменении в Описании количества символов держать этот стиль Ваш код? 

bottom: 60px;        - Зачем мне нижний отступ? Вопрос же по другому ставил.... Мне нужно прижать цену и кнопки (добавить в сравнение + в закладки) к нижней части окна Списка.

 Прошу совет с кодом от того кто знает.

Ссылка на комментарий
Поделиться на других сайтах

1 час назад, jaffagold сказал:

Спасибо, но там немного не так. Лень (да и не к чему) прописывать новые стили в конфигурационных файлах системы...

Нашел такой выход: 

Скрытый текст

        /* ЦЕНА товара в Списке */
.product-thumb .price  { 
  left: 15px;                /* отступ с лева - для цены товара в Списке */
  position: absolute; /* зафиксируем цену */
  bottom: 0px;         /* прижмем к низу окна */
}
        /* Описание в Сетке - отступ для цены */

.product-description p{
  margin: 0 0 30px 0;  /* используем только нижний отступ - так как именно он упирается в цену товара и таким образом делаем отступ что бы нормально смотрелось в Списке */
}

  - так (как-то) проще получается.

Ссылка на комментарий
Поделиться на других сайтах

Присоединяйтесь к обсуждению

Вы можете опубликовать сейчас и зарегистрироваться позже. Если у вас есть учётная запись, войдите, чтобы публиковать под своей учётной записью.

Гость
Ответить в тему...

×   Вы вставили отформатированное содержимое.   Удалить форматирование

  Разрешено не более 75 эмодзи.

×   Ваша ссылка была автоматически встроена.   Показать вместо этого как ссылку

×   Ваш предыдущий контент был восстановлен.   Очистить редактор

×   Нельзя вставлять изображения напрямую. Загрузите или вставьте изображения по URL.

 Поделиться

  • Сейчас на странице   0 пользователей

    • Нет пользователей, просматривающих эту страницу