COVID2019 и это вот все. Друзья, вся эта история начинает плохо пахнет. Мойте руки, не ходите в люди. Отложите все плановые покупки и положите в носок заначку. Заприте ваших родителей, бабушек-дедушек на даче. Лучше перебдеть чем недобдеть. Берегите себя!

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


Serg-24

Recommended Posts

 Пытался в Списке опустить (прижать) цену, чтОБы она была прижата к нижней части карточки, но как не пытался ставить 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;  /* используем только нижний отступ - так как именно он упирается в цену товара и таким образом делаем отступ что бы нормально смотрелось в Списке */
}

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

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

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

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

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

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

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

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