Latest web development tutorials

Foundation Equalizer (Equalizer)

Wir können ein Containerelement hinzufügen , data-equalizer Eigenschaft und jedem Unterelement hinzufügen data-equalizer-watch Eigenschaft eine identische Höhenausgleich zu schaffen. Die höchste Element bestimmt die Höhe der anderen Elemente.

Hinweis: Der Schieber benötigt JavaScript. So müssen Sie tiftung JS zu initialisieren:

Beispiele

<Div class = "Reihe" Daten -equalizer>
<Div class = "Medium-4 Spalten Panel" Daten-Equalizer-watch>
Lorem ipsum ...
</ Div>
<Div class = "Medium-4 Spalten Panel" Daten-Equalizer-watch>
Sed ut ...
</ Div>
<Div class = "Medium-4 Spalten Panel" Daten-Equalizer-watch>
Lorem ipsum ...
</ Div>
</ Div>

<! - Initialisieren Foundation JS ->
<Script>
$ (Dokument) .ready (function () {
$ (Dokument) .foundation ();
})
</ Script>

Versuchen »

Equalizer verschiedene Bildschirme

Auf Ausgleich durch Addition data-equalizer-mq=" value " mq Attribut für verschiedene Bildschirmgrößen auf die gleiche Höhe eingestellt. Der Wert kann eine der folgenden sein:

Wert Beschreibung Beispiele
medium-up Default. Erstellen Sie die gleiche Behälterhöhe, Breite größer ist als 40.063em
large-up Erstellen Sie die gleiche Behälterhöhe, Breite größer ist als 64.063em versuchen
xlarge-up Erstellen Sie die gleiche Behälterhöhe, Breite größer ist als 90.063em versuchen
xxlarge-up Erstellen Sie die gleiche Behälterhöhe, Breite größer ist als 120.063em versuchen

Verschachtelte Inhalt

Die data-equalizer und data-equalizer-watch den gleichen Wert der Immobilie bei . Dies kann zusammen mit dem Equalizer Behälter verbunden werden. Wiederholt Equalizer verschachtelt, stellen Sie sicher, dass sie ein Match sind:

Beispiele

<! - Das entzerrte Container ->
<Div class = "Reihe" Daten -equalizer = "first">
<Div class = "Medium-4 Spalten">
<Div class = "Panel" Daten -equalizer-watch = "first">
<H3> Panel - </ h3>

<! - Ein Equalized Container Inside The Equalized Container ->
<Div class = "Reihe" Daten -equalizer = "zweite">
<Div class = "Panel" Daten -equalizer-watch = "zweite">
<H3> Nested - Panel </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = "Panel" Daten -equalizer-watch = "zweite">
<H3> Nested - Panel </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = "Panel" Daten -equalizer-watch = "zweite">
<H3> Nested - Panel </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
</ Div>
<! - End Nested Equalized Container - >

</ Div>
</ Div>
<Div class = "Medium-4 Spalten">
<Div class = "Panel" Daten -equalizer-watch = "first">
<H3> Panel - </ h3>
<P> Ut enim ... </ p>
</ Div>
</ Div>
<Div class = "Medium-4 Spalten">
<Div class = "Panel" Daten -equalizer-watch = "first">
<H3> Panel - </ h3>
<P> Lorem ipsum .... </ p>
</ Div>
</ Div>
</ Div>

Versuchen »