Latest web development tutorials

Fundacja Korektor (Equalizer)

Możemy dodać element kontenera data-equalizer właściwość i dodać do każdego podelementu data-equalizer-watch własności stworzyć identyczną wysokość korektora. Najwyższym elementem określa wysokość pozostałych elementów.

Uwaga: Suwak wymaga JavaScript. Więc trzeba zainicjować OUNDATION JS:

Przykłady

<div class = "wiersz" Dane -equalizer>
< "Medium-4 div class = panel kolumny" data-korektor-watch>
Lorem ipsum ...
</ Div>
< "Medium-4 div class = panel kolumny" data-korektor-watch>
Sed ut ...
</ Div>
< "Medium-4 div class = panel kolumny" data-korektor-watch>
Lorem ipsum ...
</ Div>
</ Div>

<! - Inicjowanie Fundacja JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>

Spróbuj »

Korektor różne ekrany

Na wyrównanie dodając data-equalizer-mq=" value " mq atrybut ustawiony na tej samej wysokości dla różnych rozmiarów ekranu. Wartość ta może być jednym z następujących:

wartość opis Przykłady
medium-up Domyślnie. Tworzenie taką samą wysokość kontenera, szerokość większą niż 40.063em
large-up Tworzenie taką samą wysokość kontenera, szerokość większą niż 64.063em próbować
xlarge-up Tworzenie taką samą wysokość kontenera, szerokość większą niż 90.063em próbować
xxlarge-up Tworzenie taką samą wysokość kontenera, szerokość większą niż 120.063em próbować

zawartość zagnieżdżona

data-equalizer i data-equalizer-watch dodać taką samą wartość nieruchomości. Może to być połączone z pojemnikiem korektora. Wielokrotnie zagnieżdżony korektora, upewnij się, że są mecze:

Przykłady

<! - Równa Container ->
<div class = "wiersz" Dane -equalizer = "pierwszy">
<div class = "średnio-4 kolumny">
<Div class = "Panel" Dane -equalizer-watch = "pierwszy">
<H3> Panel </ h3>

<! - Zrównanym Pojemnik Wewnątrz Równa Container ->
<div class = "wiersz" Dane -equalizer = "drugi">
<Div class = "Panel" Dane -equalizer-watch = "drugi">
<H3> zagnieżdżonych panelu </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = "Panel" Dane -equalizer-watch = "drugi">
<H3> zagnieżdżonych panelu </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = "Panel" Dane -equalizer-watch = "drugi">
<H3> zagnieżdżonych panelu </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
</ Div>
<! - Koniec Zagnieżdżony Równa Container - >

</ Div>
</ Div>
<div class = "średnio-4 kolumny">
<Div class = "Panel" Dane -equalizer-watch = "pierwszy">
<H3> Panel </ h3>
<P> Ut enim ... </ p>
</ Div>
</ Div>
<div class = "średnio-4 kolumny">
<Div class = "Panel" Dane -equalizer-watch = "pierwszy">
<H3> Panel </ h3>
<P> Lorem ipsum .... </ p>
</ Div>
</ Div>
</ Div>

Spróbuj »