Наличие 3 кнопок на одной высоте [дубликат]Html

Программисты Html
Ответить
Anonymous
 Наличие 3 кнопок на одной высоте [дубликат]

Сообщение Anonymous »

Это может быть что-то очень простое, но я просто усложняю ситуацию для себя. Пробовал несколько вещей, но не смог выполнить следующее:
У меня есть 3 столбца (карточки) с текстом и кнопкой внизу. Средний имеет функцию наведения, где при наведении на него отображается
  • .
    Проблема? При наведении курсора на среднюю карту кнопки справа и слева перетаскиваются вниз. Я бы хотел, чтобы они были на одном уровне и не двигались. Как сохранить 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: grid;
    /* 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 {
    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]
    
    
    [*]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 МБ.

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