Как сделать заголовки в карточках товаров одинаковой высоты?

Как можно реализовать выравнивание высоты заголовков с помощью CSS/SCSS, учитывая наличие блоков с информацией "в наличии" в некоторых заголовках, и отсутствие их в других, а также то, что некоторые заголовки могут занимать три строки на мобильных устройствах?
  • 23 апреля 2024 г. 11:40
Ответы на вопрос 2
Для того чтобы сделать заголовки в карточках товаров одинаковой высоты, можно использовать следующий подход:

1. Установить для всех заголовков товаров одинаковую высоту, задав свойство `height` через CSS.

2. Если некоторые заголовки содержат дополнительную информацию (такую как "в наличии"), то можно выделить эту информацию отдельным блоком внутри заголовка. Например, использовать элемент `span` для этой информации и задать ему свойство `display: block;` для переноса текста на новую строку.

3. Для случаев, когда заголовок занимает больше одной строки на мобильных устройствах, можно использовать медиа-запросы в CSS для адаптивного изменения высоты заголовка согласно размеру экрана устройства.

Пример CSS для выравнивания высоты заголовков товаров:

```css
.product-title {
  height: 60px; /* устанавливаем высоту заголовка */
}

.product-title span {
  display: block; /* отдельная строка для дополнительной информации */
}

@media only screen and (max-width: 768px) {
  .product-title {
    height: auto; /* изменяем высоту на авто для мобильных устройств */
  }
}
```

Таким образом, с помощью CSS/SCSS можно легко выровнять высоту заголовков товаров даже при наличии дополнительной информации и адаптировать эту высоту для различных размеров экранов.
как можно реализовать выравнивание высоты заголовков с помощью CSS/SCSS

Никак. Т.к. даже, если задать минимальную высоту, то в 1 ряду могут появится элементы, у которых заголовок будет в 1 строку, а значит у всех появится пустое пространство снизу.
Похожие вопросы