/ / Faça colunas sempre iguais altura? (Fundação 5) - zurb-foundation

Faça colunas sempre iguais altura? (Fundação 5) - zurb-foundation

Como criar um layout como mostrado na imagem? A primeira coluna à esquerda e a segunda coluna à direita devem sempre ter a mesma altura dependendo da altura da primeira coluna, usando Foundation 5.

insira a descrição da imagem aqui

Respostas:

0 para resposta № 1

Equalizador de fundação vai torná-los mesmo, mas com base no mais longo. http://foundation.zurb.com/docs/components/equalizer.html

você pode usar o jQuery para fazer você mesmo assim (isso pode funcionar com muitas colunas e com qualquer coluna como a que determina o tamanho:

$(document).ready(function() {
sizeRow();

function sizeRow() {
var $col = $(".sizeRow .size-by-me");
var height = $col.height();
$col.siblings(".size-me").height(height);
}
});
.small-6 {
float: left;
width: 50%;
}
.col1 {
height: 400px;
background-color: #F00;
}
.col2 {
height: 200px;
background-color: #FF0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<div class="row sizeRow">
<div class="small-6 columns size-by-me col1">Column 1</div>
<div class="small-6 columns col2 size-me">Column 2</div>
</div>


Perguntas relacionadas


Comentários (0)

Adicione um comentário