CSS
- 1 ответ
- 0 вопросов
0
Вклад в тег
<div class="card-row">
<div class="card">
<h3 class="card-title">Однострочный заголовок</h3>
<p>Описание карточки</p>
</div>
<div class="card">
<h3 class="card-title">Многострочный заголовок, который занимает больше места</h3>
<p>Описание карточки</p>
</div>
<div class="card">
<h3 class="card-title">Ещё один однострочный заголовок</h3>
<p>Описание карточки</p>
</div>
</div>.card-row {
display: flex;
gap: 16px; /* Отступ между карточками */
}
.card {
border: 1px solid #ccc;
padding: 16px;
flex: 1;
}
.card-title {
margin: 0;
padding: 0;
font-size: 18px;
line-height: 1.5;
}function adjustCardTitlesHeight() {
const rows = document.querySelectorAll('.card-row');
rows.forEach(row => {
const titles = row.querySelectorAll('.card-title');
let maxHeight = 0;
titles.forEach(title => {
title.style.height = 'auto';
const titleHeight = title.offsetHeight;
if (titleHeight > maxHeight) {
maxHeight = titleHeight;
}
});
titles.forEach(title => {
title.style.height = `${maxHeight}px`;
});
});
}
window.addEventListener('load', adjustCardTitlesHeight);
window.addEventListener('resize', adjustCardTitlesHeight);