Наличие 3 кнопок на одной высотеCSS

Разбираемся в CSS
Ответить
Anonymous
 Наличие 3 кнопок на одной высоте

Сообщение Anonymous »

Это может быть что-то очень простое, но я просто усложняю ситуацию для себя. Пробовал несколько вещей, но не смог выполнить следующее:
У меня есть 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
Ответить

Быстрый ответ

Изменение регистра текста: 
Смайлики
:) :( :oops: :roll: :wink: :muza: :clever: :sorry: :angel: :read: *x)
Ещё смайлики…
   
К этому ответу прикреплено по крайней мере одно вложение.

Если вы не хотите добавлять вложения, оставьте поля пустыми.

Максимально разрешённый размер вложения: 15 МБ.

Вернуться в «CSS»