Fondation Equalizer (égaliseur)
Nous pouvons ajouter un élément conteneur de data-equalizer propriété et ajouter à chaque sous-élément de data-equalizer-watch propriété pour créer une hauteur égaliseur identiques. L'élément le plus élevé détermine la hauteur des autres éléments.
Remarque: Le curseur nécessite JavaScript. Donc, vous devez initialiser fondationcanadiennede JS:
Exemples
< "Moyen-4 classe Div = panneau colonnes"-égaliseur-montre de données>
Lorem ipsum ...
</ Div>
< "Moyen-4 classe Div = panneau colonnes"-égaliseur-montre de données>
ut Sed ...
</ Div>
< "Moyen-4 classe Div = panneau colonnes"-égaliseur-montre de données>
Lorem ipsum ...
</ Div>
</ Div>
<! - Initialisation Fondation JS ->
<Script>
$ (Document) .ready (function () {
$ (Document) .foundation ();
})
</ Script>
Essayez »
Egaliseur différents écrans
Sur l' égaliseur en ajoutant data-equalizer-mq=" value " mq attribut mis à la même hauteur pour différentes tailles d'écran. La valeur peut être l'un des éléments suivants:
| valeur | description | Exemples |
|---|---|---|
medium-up | Par défaut. Créer la même hauteur de conteneur, une largeur supérieure à 40.063em | |
large-up | Créer la même hauteur de conteneur, une largeur supérieure à 64.063em | essayer |
xlarge-up | Créer la même hauteur de conteneur, une largeur supérieure à 90.063em | essayer |
xxlarge-up | Créer la même hauteur de conteneur, une largeur supérieure à 120.063em | essayer |
contenu imbriqué
Les data-equalizer et des data-equalizer-watch ajouter la même valeur de la propriété. Ceci peut être raccordé conjointement au récipient d'égalisation. À plusieurs reprises imbriqué égaliseur, assurez-vous qu'ils sont un match:
Exemples
<div class = "données de ligne" -equalizer = "first">
<class = "Div moyennes-4 colonnes">
<Div class = de données "du panneau" -equalizer-watch = "premiers">
<H3> Panneau </ h3>
<! - Un Equalized Container Inside The Equalized Container ->
<div class = "données de ligne" -equalizer = "second">
<Div class = de données "du panneau" -equalizer-watch = "deuxième">
<H3> Panneau imbriqué </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = de données "du panneau" -equalizer-watch = "deuxième">
<H3> Panneau imbriqué </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = de données "du panneau" -equalizer-watch = "deuxième">
<H3> Panneau imbriqué </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
</ Div>
<! - End imbriquée Equalized Container - >
</ Div>
</ Div>
<class = "Div moyennes-4 colonnes">
<Div class = de données "du panneau" -equalizer-watch = "premiers">
<H3> Panneau </ h3>
<P> Ut enim ... </ p>
</ Div>
</ Div>
<class = "Div moyennes-4 colonnes">
<Div class = de données "du panneau" -equalizer-watch = "premiers">
<H3> Panneau </ h3>
<P> Lorem ipsum .... </ p>
</ Div>
</ Div>
</ Div>
Essayez »