Usamos cookies para medir audiência e melhorar sua experiência. Você pode aceitar ou recusar a qualquer momento. Veja sobre o iMasters.
Olá,
Estou tentando clocar em meu blog alguns posts em blocos na pagina inicial de acordo com o modelo deste blog http://blog.anthropologie.com/. Percebam que neste blog, as divs de posts tem tamanhos diferentes e mesmo assim, mantem 3 posts por linha. No meu caso abaixo, com as divs do mesmo tamanho, consigo deixar 3 posts por linha, porém se uma div de post tiver o tamanho maior que o outro, fica desconfigurado, não aparece 3 posts por linha.
Me ajudem por gentileza!!
<!doctype html>
<html>
<head>
<style type="text/css">
.container {
display: block;
}
.col-md-4 {
margin: 2px;
width:2%;
height: 2%;
background: #ccc;
float:left;
width: 25.33%;
box-sizing: border-box;
padding: 10px;
}
</style>
</head>
<body>
<div class="container">
<div class="col-md-4">
Post6<br>
Post6<br>
</div>
<div class="col-md-4">
Post5<br>
Post5<br>
</div>
<div class="col-md-4">
Post4
</div>
<div class="col-md-4">
Post3
</div>
<div class="col-md-4">
Post2
</div>
<div class="col-md-4">
Post1
</div>
</div>
</body>
</html>Clesios,
Existe um plugin chamado Masonry. Ele calcula a altura das divs e da um stack deles uma abaixo da outra. Com o bootstrap você não vai chegar nesse resultado, já que o que ele cria são linhas e colunas independentes e a largura e altura de uma pode influenciar a outra.
Veja esse plugin aqui: http://masonry.desandro.com
Teste e nos traga o resultado.
-------------------------------------
>
Até onde conheço, da para ser feito com:
position: absolute;
left: valor;
top: valor;Você pode atribuir um valor para top, até ele se ajustar ao seu gosto.
Carlos,
Quando você define left e top, seria interessante você anular esses valores com um transform, já que eles não podem ser 100% precisos.
Veja no meu exemplo aqui: JSFiddle - como é diferente o uso de transform ao posicionar um elemento. Perceba que a div que contém, está perfeitamente no centro, enquanto a outra está um pouco jogada a direita e abaixo.
Abraços brother!
L. HenriqueJá utilizei este plugin Masonry no wordpress, porém há um tempo de "loading..." toda vez que se carrega a página inicial. Tentei retirar este tempo de carregamento, porem não obtive sucesso pois utilizo a versão gratis deste plugin e nao tenho acesso a todo o codigo. Por isso não utilizo, este plugin faz exatamente o que quero, porém demora para carregar. Se puder me ajudar com isso, agradeço mais ainda!!!
Carlos Henrique A.Obrigado pela Dica, mais não consegui aplicar aqui. Vou dar mais uma estudada.
@clesiosmatosAté onde conheço, da para ser feito com:
Você pode atribuir um valor para top, até ele se ajustar ao seu gosto.