Выровненная сетка Zurb Foundation: как расположить содержимое внизу div внутри ячейки сетки

Question

Есть много вопросов о том, как расположить контент внизу div, и обычно это не так уж сложно сделать с Flexbox.

Однако я использую сетку Zurb Foundation с уравнивание. Выравнивание необходимо, потому что мои cell s содержат изображение (фиксированная высота) и подпись - переменной длины.

Заголовок включает заголовок (сидит прямо под изображением) и подзаголовок, который я хочу разместить внизу карты изображения.

Вот кодекс, показывающий, что я работая с: https://codepen.io/arokat/pen/ZEbzOMp

Я перепробовал множество предлагаемых решений (flexbox, настройка height: 100% на .image-card-caption__title и т. д. c), но я просто могу получить субтитры, чтобы придерживаться дна + получить правильный общий вид. (Установка абсолютного позиционирования + bottom: 0 сбрасывает весь макет ...)

Мне кажется, проблема в том, что высота div не устанавливается до тех пор, пока не будет запущен код выравнивания JS, поэтому любые правила CSS применяются в неподходящее время.

Я бы действительно хотел не устанавливать фиксированную высоту для элемента .image-card-caption, поскольку длина заголовка и субтитров может сильно различаться.

Есть мысли? Заранее спасибо:)

Как это выглядит в данный момент:

Как я хочу, чтобы это выглядело:
(приблизительно - выравнивание не идеально, я просто сделал это с тегами <br />, чтобы дать идею)

Answer 1

Я сделал что-то действительно похожее на то, что у вас есть, с некоторыми модификациями кода, в которых используются либо компоненты Foundation, которые улучшают и упрощают структуру, либо «хаки», помогающие достичь того, что вам нужно.

Вы можете проверить это в этом CodePen

Позвольте мне объяснить, что я сделал.

1. Когда вы используете макет сетки, Foundation имеет возможность сделать Сетка блоков . Это действительно просто и очень удобно в использовании и решает необходимость подсчитать, сколько столбцов должна иметь каждая точка останова. То, что я сделал, было

<div class='grid-x grid-padding-x small-up-1 medium-up-2 large-up-3'>

. Это означает, что он указывает контейнеру, что у него будет 1 блок на строку на небольших устройствах, 2 блока на строку на средних устройствах и 3 блоки на ряд на больших устройствах и выше. Все, что вам нужно сделать после этого, это просто определить ячейку следующим образом:

<div class='cell'>

Как видите, это намного проще, чем <div class='cell medium-6 large-4'>, и это экономит много времени на печатание.

Я специально спрашивал вас выше, требуется ли вам использовать изображения в теге img. Почему? Мне нравится использовать прозрачную прокладку с этим svg элементом. Это действительно легкий.

<img src="data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1 1'%3E%3C/svg%3E">

Что он делает, так это то, что он создает SVG-изображение 1x1, но так как у него нет заданных c ширины и высоты, он просто имеет viewBox с пропорция 1: 1, которая в основном квадрат. Таким образом, он занимает доступное пространство и создает адаптивную квадратную форму. Поскольку оно прозрачное, вы можете использовать исходное изображение в качестве фона родительского элемента.

Таким образом, ваш элемент .image-card__image всегда будет иметь одинаковую пропорцию в каждом элементе .image-card, что позволит вам использовать data-equalizer специально для названий.

Эквалайзер данных может фактически использоваться для нескольких элементов, синхронизируя несколько высот, но структура в этом случае на самом деле не требует этого. То, что я сделал, в основном назвал data-equalizer до title (вы можете узнать больше об этом здесь ), и я назначил параметры data-equalizer-watch='title' элементам контейнера заголовка.

Кроме того, я не использовал гибкие определения, которые вы использовали для .image-card__image. При использовании SVG они на самом деле не нужны.

Работают ли эти изменения у вас?