tgoop.com/webdevlair/3941
Create:
Last Update:
Last Update:
Создайте карточку, которая содержит изображение и текст, выровненный по нижнему краю карточки. Карточка должна иметь фиксированную высоту, и текст всегда должен находиться у нижней границы.
Ожидаемое поведение:• Изображение занимает верхнюю часть карточки.• Текст закреплён внизу карточки, даже если изображение маленькое.
Решение задачи
<div class="card">
<img src="https://via.placeholder.com/150 " alt="Placeholder Image" class="card-img">
<div class="card-text">Текст внизу карточки</div>
</div>
.card {
width: 200px;
height: 300px;
display: flex;
flex-direction: column;
justify-content: space-between;
border: 1px solid #ccc;
border-radius: 8px;
overflow: hidden;
box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
}
.card-img {
width: 100%;
height: auto;
max-height: 70%; /* Ограничиваем высоту изображения */
}
.card-text {
padding: 10px;
background-color: #f9f9f9;
text-align: center;
}