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>
<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>
<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 »