Latest web development tutorials

Fundación Equalizer (Ecualizador)

Podemos añadir un elemento contenedor data-equalizer propiedad, y añadir a cada sub-elemento data-equalizer-watch propiedad para crear un ecualizador idéntica altura. El elemento más alto determina la altura de los otros elementos.

Nota: El regulador requiere JavaScript. Por lo que necesita para inicializar JS OUNDATION:

Ejemplos

<class = datos Div "fila" -equalizer>
< "Medio-4 div class = panel de columnas"-ecualizador de reloj de datos>
Vestibulum ...
</ Div>
< "Medio-4 div class = panel de columnas"-ecualizador de reloj de datos>
Sed ut ...
</ Div>
< "Medio-4 div class = panel de columnas"-ecualizador de reloj de datos>
Vestibulum ...
</ Div>
</ Div>

<! - Inicializar Fundación JS ->
<Script>
$ (Document) ready (function () {
$ (Document) .foundation ();
})
</ Script>

Trate »

Ecualizador diferentes pantallas

El ecualizador añadiendo data-equalizer-mq=" value " mq conjunto de atributos a la misma altura para diferentes tamaños de pantalla. El valor puede ser una de las siguientes:

valor descripción Ejemplos
medium-up Predeterminado. Crear la misma altura del contenedor, anchura mayor que 40.063em
large-up Crear la misma altura del contenedor, anchura mayor que 64.063em probar
xlarge-up Crear la misma altura del contenedor, anchura mayor que 90.063em probar
xxlarge-up Crear la misma altura del contenedor, anchura mayor que 120.063em probar

contenido anidado

La data-equalizer y data-equalizer-watch se suman el mismo valor de la propiedad. Este puede ser conectado junto al contenedor de ecualizador. Anidado en repetidas ocasiones ecualizador, asegúrese de que son un partido:

Ejemplos

<! - The Container Equalized ->
<class = datos Div "fila" -equalizer = "primera">
<div class = "medio-4 columnas">
<Div class = datos "panel" -equalizer-reloj = "primeros">
<H3> Panel </ h3>

<! - Una Equalized contenedor en el Equalized Container ->
<class = datos Div "fila" -equalizer = "segundo">
<Div class = datos "panel" -equalizer-reloj = "segundas">
<H3> Panel de anidado </ h3 >
<P> Vestibulum ... </ p>
</ Div>
<Div class = datos "panel" -equalizer-reloj = "segundas">
<H3> Panel de anidado </ h3 >
<P> Vestibulum ... </ p>
</ Div>
<Div class = datos "panel" -equalizer-reloj = "segundas">
<H3> Panel de anidado </ h3 >
<P> Vestibulum ... </ p>
</ Div>
</ Div>
<! - Anidado final Equalized Container - >

</ Div>
</ Div>
<div class = "medio-4 columnas">
<Div class = datos "panel" -equalizer-reloj = "primeros">
<H3> Panel </ h3>
<P> Ut enim ... </ p>
</ Div>
</ Div>
<div class = "medio-4 columnas">
<Div class = datos "panel" -equalizer-reloj = "primeros">
<H3> Panel </ h3>
<P> Vestibulum .... </ p>
</ Div>
</ Div>
</ Div>

Trate »