Фонд Эквалайзер (Equalizer)
Мы можем добавить элемент контейнера data-equalizer свойства, а также добавить к каждому подэлементов data-equalizer-watch собственности , чтобы создать одинаковую высоту эквалайзера. Самый высокий элемент определяет высоту остальных элементов.
Примечание: слайдер требуется JavaScript. Таким образом, вы должны инициализировать oundation JS:
примеров
<класс = данные Div "строка" -equalizer>
< "Среднего класса 4 = Див панели столбцы" Данные эквалайзера-часы>
Lorem Ipsum ...
</ Div>
< "Среднего класса 4 = Див панели столбцы" Данные эквалайзера-часы>
Sed ут ...
</ Div>
< "Среднего класса 4 = Див панели столбцы" Данные эквалайзера-часы>
Lorem Ipsum ...
</ Div>
</ Div>
<! - Initialize Foundation JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
< "Среднего класса 4 = Див панели столбцы" Данные эквалайзера-часы>
Lorem Ipsum ...
</ Div>
< "Среднего класса 4 = Див панели столбцы" Данные эквалайзера-часы>
Sed ут ...
</ Div>
< "Среднего класса 4 = Див панели столбцы" Данные эквалайзера-часы>
Lorem Ipsum ...
</ Div>
</ Div>
<! - Initialize Foundation JS ->
<Script>
$ (Документ) .ready (функция () {
$ (Документ) .foundation ();
})
</ Script>
Попробуйте »
Эквалайзер различные экраны
На эквалайзером путем добавления data-equalizer-mq=" value " кв.м. атрибут установлен на той же высоте , для разных размеров экрана. Значение может быть одно из следующих действий:
| значение | описание | примеров |
|---|---|---|
medium-up | По умолчанию. Создайте такую же высоту контейнера, ширина больше, чем 40.063em | |
large-up | Создайте такую же высоту контейнера, ширина больше, чем 64.063em | пробовать |
xlarge-up | Создайте такую же высоту контейнера, ширина больше, чем 90.063em | пробовать |
xxlarge-up | Создайте такую же высоту контейнера, ширина больше, чем 120.063em | пробовать |
Уплотненный содержание
data-equalizer и data-equalizer-watch добавить такое же значение свойства. Это могут быть соединены вместе с контейнером эквалайзера. Несколько раз вложенными эквалайзер, убедитесь, что они матч:
примеров
<! - Скорректированный Контейнер ->
<класс = данные "строка" Div -equalizer = "первый">
<класс = "Див среднего 4 колонки">
<Div класс = "панель" данные -equalizer-часы = "первый">
<H3> Панель </ h3>
<! - Выровненный Контейнер Внутри Откорректированная Контейнер ->
<класс = данные "строка" Div -equalizer = "второй">
<Div класс = "панель" данные -equalizer-часы = "вторые">
<H3> Вложенные панель </ h3 >
<P> Lorem Ipsum ... </ p>
</ Div>
<Div класс = "панель" данные -equalizer-часы = "вторые">
<H3> Вложенные панель </ h3 >
<P> Lorem Ipsum ... </ p>
</ Div>
<Div класс = "панель" данные -equalizer-часы = "вторые">
<H3> Вложенные панель </ h3 >
<P> Lorem Ipsum ... </ p>
</ Div>
</ Div>
<! - Конец вложенного Откорректированная Контейнер - >
</ Div>
</ Div>
<класс = "Див среднего 4 колонки">
<Div класс = "панель" данные -equalizer-часы = "первый">
<H3> Панель </ h3>
<P> Ut enim ... </ p>
</ Div>
</ Div>
<класс = "Див среднего 4 колонки">
<Div класс = "панель" данные -equalizer-часы = "первый">
<H3> Панель </ h3>
<P> Lorem Ipsum .... </ p>
</ Div>
</ Div>
</ Div>
<класс = данные "строка" Div -equalizer = "первый">
<класс = "Див среднего 4 колонки">
<Div класс = "панель" данные -equalizer-часы = "первый">
<H3> Панель </ h3>
<! - Выровненный Контейнер Внутри Откорректированная Контейнер ->
<класс = данные "строка" Div -equalizer = "второй">
<Div класс = "панель" данные -equalizer-часы = "вторые">
<H3> Вложенные панель </ h3 >
<P> Lorem Ipsum ... </ p>
</ Div>
<Div класс = "панель" данные -equalizer-часы = "вторые">
<H3> Вложенные панель </ h3 >
<P> Lorem Ipsum ... </ p>
</ Div>
<Div класс = "панель" данные -equalizer-часы = "вторые">
<H3> Вложенные панель </ h3 >
<P> Lorem Ipsum ... </ p>
</ Div>
</ Div>
<! - Конец вложенного Откорректированная Контейнер - >
</ Div>
</ Div>
<класс = "Див среднего 4 колонки">
<Div класс = "панель" данные -equalizer-часы = "первый">
<H3> Панель </ h3>
<P> Ut enim ... </ p>
</ Div>
</ Div>
<класс = "Див среднего 4 колонки">
<Div класс = "панель" данные -equalizer-часы = "первый">
<H3> Панель </ h3>
<P> Lorem Ipsum .... </ p>
</ Div>
</ Div>
</ Div>
Попробуйте »