Fondazione Equalizer (Equalizzatore)
Possiamo aggiungere un elemento contenitore data-equalizer
proprietà, e aggiungere ad ogni sotto-elemento data-equalizer-watch
proprietà per creare un'altezza pareggio identica. L'elemento più alto determina l'altezza degli altri elementi.
Nota: Il cursore richiede JavaScript. Quindi è necessario inizializzare OUNDATION JS:
Esempi
<class = dati "riga" Div -equalizer>
< "Medio-4 div class = pannello colonne"-equalizzatore-watch dati>
Lorem ipsum ...
</ Div>
< "Medio-4 div class = pannello colonne"-equalizzatore-watch dati>
ut Sed ...
</ Div>
< "Medio-4 div class = pannello colonne"-equalizzatore-watch dati>
Lorem ipsum ...
</ Div>
</ Div>
<! - Inizializzazione Fondazione JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
< "Medio-4 div class = pannello colonne"-equalizzatore-watch dati>
Lorem ipsum ...
</ Div>
< "Medio-4 div class = pannello colonne"-equalizzatore-watch dati>
ut Sed ...
</ Div>
< "Medio-4 div class = pannello colonne"-equalizzatore-watch dati>
Lorem ipsum ...
</ Div>
</ Div>
<! - Inizializzazione Fondazione JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Prova »
Equalizzatore diversi schermi
Sul pareggio con l'aggiunta data-equalizer-mq=" value "
mq attributo impostato alla stessa altezza per le diverse dimensioni dello schermo. Il valore può essere uno dei seguenti:
valore | descrizione | Esempi |
---|---|---|
medium-up | Predefinito. Creare la stessa altezza del contenitore, larghezza maggiore di 40.063em | |
large-up | Creare la stessa altezza del contenitore, larghezza maggiore di 64.063em | provare |
xlarge-up | Creare la stessa altezza del contenitore, larghezza maggiore di 90.063em | provare |
xxlarge-up | Creare la stessa altezza del contenitore, larghezza maggiore di 120.063em | provare |
contenuti nidificati
Il data-equalizer
e data-equalizer-watch
aggiungere lo stesso valore della proprietà. Questo può essere collegato insieme al contenitore equalizzatore. Ripetutamente annidati equalizzatore, assicurarsi che siano partner:
Esempi
<! - Il Equalized Container ->
<div class = dati "riga" -equalizer = "prima">
<div class = "medio-4 colonne">
<Div class = dati "panel" -equalizer-orologio = "primi">
<H3> Pannello </ h3>
<! - Un Equalized Contenitore Inside The Equalized Container ->
<div class = dati "riga" -equalizer = "secondo">
<Div class = dati "panel" -equalizer-orologio = "seconde">
<H3> Pannello nidificati </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = dati "panel" -equalizer-orologio = "seconde">
<H3> Pannello nidificati </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = dati "panel" -equalizer-orologio = "seconde">
<H3> Pannello nidificati </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
</ Div>
<! - Fine nidificato Equalized Container - >
</ Div>
</ Div>
<div class = "medio-4 colonne">
<Div class = dati "panel" -equalizer-orologio = "primi">
<H3> Pannello </ h3>
<P> Ut enim ... </ p>
</ Div>
</ Div>
<div class = "medio-4 colonne">
<Div class = dati "panel" -equalizer-orologio = "primi">
<H3> Pannello </ h3>
<P> Lorem ipsum .... </ p>
</ Div>
</ Div>
</ Div>
<div class = dati "riga" -equalizer = "prima">
<div class = "medio-4 colonne">
<Div class = dati "panel" -equalizer-orologio = "primi">
<H3> Pannello </ h3>
<! - Un Equalized Contenitore Inside The Equalized Container ->
<div class = dati "riga" -equalizer = "secondo">
<Div class = dati "panel" -equalizer-orologio = "seconde">
<H3> Pannello nidificati </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = dati "panel" -equalizer-orologio = "seconde">
<H3> Pannello nidificati </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = dati "panel" -equalizer-orologio = "seconde">
<H3> Pannello nidificati </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
</ Div>
<! - Fine nidificato Equalized Container - >
</ Div>
</ Div>
<div class = "medio-4 colonne">
<Div class = dati "panel" -equalizer-orologio = "primi">
<H3> Pannello </ h3>
<P> Ut enim ... </ p>
</ Div>
</ Div>
<div class = "medio-4 colonne">
<Div class = dati "panel" -equalizer-orologio = "primi">
<H3> Pannello </ h3>
<P> Lorem ipsum .... </ p>
</ Div>
</ Div>
</ Div>
Prova »