У меня есть 3 столбца (карточки) с текстом и кнопкой внизу. Средний имеет функцию наведения, где при наведении на него отображается значок .
Проблема? Кнопки не выравниваются по горизонтали. Я бы хотел, чтобы они были на одном уровне. Как выровнять три кнопки, не меняя другие компоненты?
Я знаю, что могу просто по нижнему краю: 240 пикселей; но что, если я не знаю конкретную высоту?
Вот соответствующая часть кода:
Код: Выделить всё
/* Cards, grids */
.grid {
display: grid;
gap: 16px;
}
.cards-3 {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
align-items: stretch;
/* ensure grid items fill row height */
}
.card {
background: #fff;
border: 1px solid var(--border, #ece7de);
border-radius: 16px;
padding: 18px;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.03);
display: flex;
/* key */
flex-direction: column;
/* key */
}
.card h3 {
margin: 0 0 8px;
font-size: 16px;
}
.card p {
margin: 0;
color: #555;
font-size: 14px;
}
.card-actions {
margin-top: auto;
/* pushes this block to the bottom */
text-align: center;
/* center the button horizontally */
}
.card-actions .btn {
display: inline-block;
/* keeps the button sized nicely when centered */
}
.reveal-list ul {
max-height: 0;
/* hide the list */
overflow: hidden;
opacity: 0;
transform: translateY(-4px);
margin-top: 0;
/* override .mt-2 while hidden */
transition: max-height 0.35s ease, opacity 0.25s ease, transform 0.35s ease,
margin-top 0.2s ease;
}
/* Show when the card is hovered (mouse) or focused (keyboard/tab) */
.reveal-list:hover ul,
.reveal-list:focus-within ul {
max-height: 600px;
/* big enough to contain the list */
opacity: 1;
transform: translateY(0);
margin-top: 8px;
/* restore spacing when open */
}Код: Выделить всё
[url=mailto:{{email}}?subject=Offer%20request%20%E2%80%94%20Caf%C3%A9%E2%80%91Concert]
Get an offer
[/url]
[url=mailto:{{email}}?subject=Offer%20request%20%E2%80%94%20Lecture%20%26%20Workshop]
Get an offer
[/url]
[list]
[*]What is HIP: history, milestones, where we are now.
[*]
Building blocks of HIP: sources, instruments, articulation, tempo,
ornamentation, continuo.
[*]
The early keyboard family: harpsichord, spinet, clavichord, square
piano.
[*]National styles: England, France, Germany, Italy.
[*]
Basso continuo, from figures to music, with singers or
instrumentalists.
[*]
Tailored sessions: happy to adapt topics or combine lecture and
workshop in one visit.
[/list]
[url=mailto:{{email}}?subject=Offer%20request%20%E2%80%94%20Consultation]
Get an offer
[/url]
Подробнее здесь: https://stackoverflow.com/questions/797 ... ame-height
Мобильная версия