Вложение эквалайзера Foundation CSS

Опубликовано: 11 Августа, 2022

Foundation CSS — это интерфейсная структура CSS, которая используется для создания адаптивных веб-сайтов, приложений и электронных писем, которые отлично работают на любом устройстве. Он написан с использованием HTML, CSS и Javascript и используется многими известными компаниями, такими как Amazon, Facebook, eBay и т. д. Он использует такие пакеты, как Grunt и Libsass, для быстрого кодирования и управления, а также компилятор Saas для ускорения разработки.

Эквалайзер Foundation CSS используется для придания одинаковой высоты нескольким элементам. Когда элементы имеют разную высоту, мы можем использовать эквалайзер, чтобы придать одинаковую высоту всем элементам. Вложение эквалайзера используется для создания эквалайзера внутри другого эквалайзера. В этой статье мы обсудим вложение эквалайзера Foundation CSS.

Базовые атрибуты вложения эквалайзера CSS:

data-equalizer: этот атрибут добавляется к родительскому элементу для хранения дочерних элементов.
data-equalizer-watch: этот атрибут используется с дочерним элементом для хранения идентификатора родительского элемента.

Синтаксис:

<div class="grid-x" data-equalizer="equa1">
  <div class="cell medium-4" 
         data-equalizer-watch="equa1">
    <div class="callout" 
         data-equalizer-watch="equa1" 
         data-equalizer="nest1">
      ....
  </div>
</div>

Пример 1. Следующий код демонстрирует вложение эквалайзера Foundation CSS с некоторым текстом .

Выход:

Пример 2. Следующий код демонстрирует вложение эквалайзера Foundation CSS с изображениями .

Выход:

Ссылка: https://get.foundation/sites/docs/equalizer.html#nesting

Picked CSS

Вложение эквалайзера Foundation CSS

РЕКОМЕНДУЕМЫЕ СТАТЬИ