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>
<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>
<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 »