Latest web development tutorials

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>

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>

Prova »