Для выравнивания заголовков в карточках товаров по высоте можно использовать различные методы, в зависимости от требований проекта. Ниже приведены несколько способов, как это можно реализовать с помощью JavaScript:
1. **Выравнивание с помощью вычисления максимальной высоты**:
const cards = document.querySelectorAll('.product-card'); let maxHeight = 0; cards.forEach(card => { maxHeight = Math.max(maxHeight, card.querySelector('.product-title').offsetHeight); }); cards.forEach(card => { card.querySelector('.product-title').style.height = `${maxHeight}px`; });
Этот код найдет максимальную высоту заголовка среди всех карточек и применит эту высоту ко всем заголовкам, обеспечивая выравнивание.
2. **Использование библиотеки jQuery**:
Если проект уже использует jQuery, можно воспользоваться ее методами для упрощения выравнивания:
const heights = $('.product-title').map(function() { return $(this).height(); }).get(); const maxHeight = Math.max(...heights); $('.product-title').height(maxHeight);
3. **CSS Flexbox**:
С использованием CSS Flexbox выравнивание по высоте можно реализовать без JavaScript:
.product-cards { display: flex; } .product-card { display: flex; flex-direction: column; } .product-title { align-self: stretch; }
Эти способы позволят автоматически выравнивать заголовки карточек товаров по высоте, обеспечивая более красивый и последовательный внешний вид страницы.