Как сделать одинаковую высоту футеров карточек, если содержимое контейнера меняется?
Из-за разного объёма текста, нижние содержимые карточек находятся на разной высоте. Как сделать так, чтобы эти содержимые находились на одной высоте? (как показано на 2-й картинке)
.journal-section {
margin-top: 50px;
}
.journal-collections {
display: flex;
max-width: 100%;
}
.journal-collections-item {
display: grid;
width: 100%;
grid-template-columns: repeat(auto-fill, 310px);
justify-content: center;
margin: 0 auto;
column-gap: 50px;
row-gap: 50px;
}
.card {
display: inline-block;
border: rgba(0, 0, 0, 0.3) 2px solid;
max-width: 310px;
overflow: hidden;
}
.card-desc {
display: flex;
flex-flow: column;
flex: 1;
padding: 20px;
}
.card-tag {
font-size: 16px;
opacity: 0.5;
}
.card-title {
font-size: 22px;
font-weight: 700;
transition: 0.3s;
margin-top: 11px;
}
.card-title:hover {
color: #2282FF;
transition: 0.3s;
}
.card-describe {
font-size: 15px;
text-align: justify;
margin-top: 17px;
margin-bottom: 15px;
}
.card-footer {
display: flex;
justify-content: space-between;
flex-flow: row;
padding-top: 25px;
margin-bottom: auto;
}
.icon {
display: inline-block;
width: 26px;
}
.card-footer-left, .card-footer-right {
display: flex;
}
.card-footer-btn {
opacity: 0.3;
} <div class="journal-section">
<div class="journal-collections">
<div class="journal-collections-item">
<div class="card">
<div class="card-img">
<a href="#!"><img src="/journal/img-1.jpg" alt=""></a>
</div>
<div class="card-desc">
<div class="card-tag">Журнал · Интересные статьи</div>
<a href="#!" class="card-title">Еда-2025</a>
<p class="card-describe">Казалось бы, только недавно все писали о трендах-2024, а вот уже настала пора перелистывать календарь.</p>
<div class="card-footer">
<div class="card-footer-left">
<div class="card-footer-views">
<button class="card-footer-btn" style="margin-right: 15px;"><i class="fa-regular fa-eye"></i> 21 · 29 окт.</button>
</div>
</div>
<div class="card-footer-right">
<div class="card-footer-repost">
<i class="fa-solid fa-share card-footer-btn" style="margin-right: 20px;"></i>
</div>
<div class="card-footer-likes">
<button class="card-footer-btn"><i class="fa-regular fa-heart"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<a href="#!"><img src="/journal/img-2.jpg" alt=""></a>
</div>
<div class="card-desc">
<div class="card-tag">Журнал · Статьи</div>
<a href="#!" class="card-title">Сегодня готовим борщ по традиционному рецепту</a>
<p class="card-describe">Хорошему борщу не нужны ни сало, ни чеснок, ни пампушки... Только сметана!</p>
<div class="card-footer">
<div class="card-footer-left">
<div class="card-footer-views">
<button class="card-footer-btn" style="margin-right: 15px;"><i class="fa-regular fa-eye"></i> 55 · 28 окт.</button>
</div>
</div>
<div class="card-footer-right">
<div class="card-footer-repost">
<i class="fa-solid fa-share card-footer-btn" style="margin-right: 20px;"></i>
</div>
<div class="card-footer-likes">
<button class="card-footer-btn"><i class="fa-regular fa-heart"></i></button>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<a href="#!"><img src="/journal/img-3.jpg" alt=""></a>
</div>
<div class="card-desc">
<div class="card-tag">Журнал · Дайджест</div>
<a href="#!" class="card-title">5 новых рецептов от шефов «Boemi»</a>
<p class="card-describe">Осень – время уюта и тепла. И это касается не только погоды в доме и за его пределами, но и еды.</p>
<div class="card-footer">
<div class="card-footer-left">
<div class="card-footer-views">
<button class="card-footer-btn" style="margin-right: 15px;"><i class="fa-regular fa-eye"></i> 117 · 28 окт.</button>
</div>
</div>
<div class="card-footer-right">
<div class="card-footer-repost">
<i class="fa-solid fa-share card-footer-btn" style="margin-right: 20px;"></i>
</div>
<div class="card-footer-likes">
<button class="card-footer-btn"><i class="fa-regular fa-heart"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>Ответы (1 шт):
Автор решения: Евгений Ли
→ Ссылка
Нужно обернуть элементы в два объекта(в данном примере top и bottom) и с помощью justify-content расставить по разным сторонам
.journal-section {
margin-top: 50px;
}
.journal-collections {
display: flex;
max-width: 100%;
}
.journal-collections-item {
display: grid;
width: 100%;
grid-template-columns: repeat(3, 1fr);
justify-content: center;
margin: 0 auto;
column-gap: 10px;
row-gap: 10px;
}
.card {
display: block;
// border: rgba(0, 0, 0, 0.3) 2px solid;
max-width: 310px;
box-sizing: border-box;
}
.card-desc {
display: flex;
flex-flow: column;
justify-content: space-between;
padding: 20px;
height: 100%;
border: rgba(0, 0, 0, 0.3) 2px solid;
}
.card-tag {
font-size: 16px;
opacity: 0.5;
}
.card-title {
font-size: 22px;
font-weight: 700;
transition: 0.3s;
margin-top: 11px;
}
.card-title:hover {
color: #2282FF;
transition: 0.3s;
}
.card-describe {
font-size: 15px;
text-align: justify;
margin-top: 17px;
margin-bottom: 15px;
}
.card-footer {
display: flex;
justify-content: space-between;
flex-flow: row;
padding-top: 25px;
margin-bottom: auto;
}
.icon {
display: inline-block;
width: 26px;
}
.card-footer-left, .card-footer-right {
display: flex;
}
.card-footer-btn {
opacity: 0.3;
}<div class="journal-section">
<div class="journal-collections">
<div class="journal-collections-item">
<div class="card">
<div class="card-img">
<a href="#!"><img src="/journal/img-1.jpg" alt=""></a>
</div>
<div class="card-desc">
<div class="top">
<div class="card-tag">Журнал · Интересные статьи</div>
<a href="#!" class="card-title">Еда-2025</a>
<p class="card-describe">Казалось бы, только недавно все писали о трендах-2024, а вот уже настала пора перелистывать календарь.</p>
</div>
<div class="bottom">
<div class="card-footer">
<div class="card-footer-left">
<div class="card-footer-views">
<button class="card-footer-btn" style="margin-right: 15px;"><i class="fa-regular fa-eye"></i> 21 · 29 окт.</button>
</div>
</div>
<div class="card-footer-right">
<div class="card-footer-repost">
<i class="fa-solid fa-share card-footer-btn" style="margin-right: 20px;"></i>
</div>
<div class="card-footer-likes">
<button class="card-footer-btn"><i class="fa-regular fa-heart"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<a href="#!"><img src="/journal/img-2.jpg" alt=""></a>
</div>
<div class="card-desc">
<div class="top">
<div class="card-tag">Журнал · Статьи</div>
<a href="#!" class="card-title">Сегодня готовим борщ по традиционному рецепту</a>
<p class="card-describe">Хорошему борщу не нужны ни сало, ни чеснок, ни пампушки... Только сметана!</p>
</div>
<div class="bottom">
<div class="card-footer">
<div class="card-footer-left">
<div class="card-footer-views">
<button class="card-footer-btn" style="margin-right: 15px;"><i class="fa-regular fa-eye"></i> 55 · 28 окт.</button>
</div>
</div>
<div class="card-footer-right">
<div class="card-footer-repost">
<i class="fa-solid fa-share card-footer-btn" style="margin-right: 20px;"></i>
</div>
<div class="card-footer-likes">
<button class="card-footer-btn"><i class="fa-regular fa-heart"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="card">
<div class="card-img">
<a href="#!"><img src="/journal/img-3.jpg" alt=""></a>
</div>
<div class="card-desc">
<div class="top">
<div class="card-tag">Журнал · Дайджест</div>
<a href="#!" class="card-title">5 новых рецептов от шефов «Boemi»</a>
<p class="card-describe">Осень – время уюта и тепла. И это касается не только погоды в доме и за его пределами, но и еды.</p>
</div>
<div class="bottom">
<div class="card-footer">
<div class="card-footer-left">
<div class="card-footer-views">
<button class="card-footer-btn" style="margin-right: 15px;"><i class="fa-regular fa-eye"></i> 117 · 28 окт.</button>
</div>
</div>
<div class="card-footer-right">
<div class="card-footer-repost">
<i class="fa-solid fa-share card-footer-btn" style="margin-right: 20px;"></i>
</div>
<div class="card-footer-likes">
<button class="card-footer-btn"><i class="fa-regular fa-heart"></i></button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>