Для выравнивания высоты карточек на странице с использованием CSS и JavaScript, необходимо применять несколько методов, которые помогут реализовать указанные требования. Вот пошаговое решение:
### 1. Flexbox
Используйте `display: flex` для родительского контейнера карточек. Это автоматически выровняет карточки по высоте.
### 2. CSS Grid
Альтернативно, можно использовать CSS Grid для выравнивания высоты карточек.
### 3. JavaScript
Если вам нужно, чтобы высота карточек адаптировалась, когда кнопка появляется при наведении не нарушая расположение других карточек, вы можете добавить обработчик событий на карточки. JavaScript будет считывать высоту текущей карточки и устанавливать её высоту для всех карточек.
### Пример решения на основе Flexbox и JavaScript:
Вот пример кода, который поможет выровнять карточки по высоте:
```html
<div class="card-container">
<div class="card">
<h3>Card 1</h3>
<p>Some content here...</p>
<button class="btn">Hover me</button>
</div>
<div class="card">
<h3>Card 2</h3>
<p>Some content here...</p>
<button class="btn">Hover me</button>
</div>
<div class="card">
<h3>Card 3</h3>
<p>Some content here...</p>
<button class="btn">Hover me</button>
</div>
</div>
<style>
.card-container {
display: flex;
justify-content: space-between;
}
.card {
border: 1px solid #ccc;
padding: 16px;
margin: 10px;
flex: 1; /* равномерное распределение карточек */
transition: height 0.3s; /* добавление анимации */
position: relative; /* для правильного позиционирования кнопок */
}
.card .btn {
display: none;
position: absolute; /* кнопка позиционируется внутри карточки */
bottom: 10px;
left: 10px;
}
.card:hover .btn {
display: block; /* кнопка появляется при наведении */
}
</style>
<script>
document.querySelectorAll('.card').forEach(card => {
card.addEventListener('mouseenter', () => {
const maxHeight = Math.max(...Array.from(document.querySelectorAll('.card')).map(c => c.offsetHeight));
card.style.height = `${maxHeight}px`; // устанавливаем размер для текущей карточки
});
card.addEventListener('mouseleave', () => {
card.style.height = 'auto'; // сбрасываем высоту
});
});
window.addEventListener('resize', () => {
document.querySelectorAll('.card').forEach(card => {
card.style.height = 'auto'; // сбрасываем высоту
});
});
</script>
```
### Пояснение кода:
- **Flexbox**: `display: flex;` используется для родительского контейнера. Это заставляет карточки занимать равное место.
- **Pseudo-класс hover**: при наведении карточка выводит кнопку, которая абсолютно позиционирована внутри карточки.
- **JavaScript события**: при наведении высота карточки изменяется на максимальную высоту всех карточек, что позволяет избежать сдвига соседних карточек. При уходе мыши сбрасывается высота до автоматической.
Такой подход обеспечивает выравнивание высоты карточек без жестких значений и с учётом интерактивности.