Latest web development tutorials

Fundação Equalizer (Equalizador)

Podemos adicionar um elemento de contêiner data-equalizer propriedade, e adicionar a cada sub-elemento data-equalizer-watch propriedade para criar um equalizador altura idêntica. O elemento mais elevada determina a altura dos outros elementos.

Observação: O regulador exige JavaScript. Então, você precisa inicializar OUNDATION JS:

Exemplos

<class = dados "linha" Div -equalizer>
<Div class = "média-4 colunas do painel de" data-empate-relógio>
Lorem ipsum ...
</ Div>
<Div class = "média-4 colunas do painel de" data-empate-relógio>
ut Sed ...
</ Div>
<Div class = "média-4 colunas do painel de" data-empate-relógio>
Lorem ipsum ...
</ Div>
</ Div>

<! - Inicializar Fundação JS ->
<Script>
$ (Document) .ready (function () {
$ (Documento) .foundation ();
})
</ Script>

tente »

Equalizador telas diferentes

No empate adicionando data-equalizer-mq=" value " mq atributo definido para a mesma altura para diferentes tamanhos de tela. O valor pode ser um dos seguintes:

valor descrição Exemplos
medium-up Padrão. Criar a mesma altura do recipiente, de dimensão superior a 40.063em
large-up Criar a mesma altura do recipiente, de dimensão superior a 64.063em tentar
xlarge-up Criar a mesma altura do recipiente, de dimensão superior a 90.063em tentar
xxlarge-up Criar a mesma altura do recipiente, de dimensão superior a 120.063em tentar

conteúdo aninhado

A data-equalizer e data-equalizer-watch adicionar o mesmo valor da propriedade. Isto pode ser ligado em conjunto para o recipiente do equalizador. Repetidamente aninhados equalizador, certifique-se que são um fósforo:

Exemplos

<! - O Equalizado Container ->
<div class = dados "linha" -equalizer = "primeira">
<div class = "média-4 colunas">
<Div class = "painel" de dados -equalizer-relógio = "primeiros">
<H3> Painel </ h3>

<! - Um Equalizado Container Inside The Equalizado Container ->
<div class = dados "linha" -equalizer = "segunda">
<Div class = "painel" de dados -equalizer-relógio = "segunda">
<H3> Painel de Nested </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = "painel" de dados -equalizer-relógio = "segunda">
<H3> Painel de Nested </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
<Div class = "painel" de dados -equalizer-relógio = "segunda">
<H3> Painel de Nested </ h3 >
<P> Lorem ipsum ... </ p>
</ Div>
</ Div>
<! - End Nested Equalizado Container - >

</ Div>
</ Div>
<div class = "média-4 colunas">
<Div class = "painel" de dados -equalizer-relógio = "primeiros">
<H3> Painel </ h3>
<P> Ut enim ... </ p>
</ Div>
</ Div>
<div class = "média-4 colunas">
<Div class = "painel" de dados -equalizer-relógio = "primeiros">
<H3> Painel </ h3>
<P> Lorem ipsum .... </ p>
</ Div>
</ Div>
</ Div>

tente »