Problema ao alinhar div's em loop de repetição

[R_MontSerrat 0]

Boa noite pessoal,

 

estou fazendo um projeto em wordpress, e tenho que mostrar todos os trabalhos do meu cliente, com o loop de repetição, assim serão mostradas miniaturas na página, o problema é que as miniaturas sao de tamanhos diferentes (larguras iguais, mas alturas diferentes), e não estou conseguindo alinhá-las da maneira correta

botei cada imagem em uma div com overflow hidden e float left, mas parei por ai, e não imagino como fazer isso.

 

O trabalho está hospedado aqui: http://artideal.com.br/galc/teste

E ele tem que ficar dessa maneira: http://artideal.com.br/galc/

 

Alguem tem alguma ideia de como posso fazer? Urgente!!
Obrigado

[Giovanni Petris 0]

<style type='text/css'>
 .column {
  width: 200px; /* largura das imagens */
  float: left;
  margin: 4px;
 }

 .image {
  display: block;
  margin-bottom: 8px;
 }
</style>



<div class='column'>

 <div class='image'>
  <img src=' ... ' />
 </div>

 <div class='image'>
  <img src=' ... ' />
 </div>

 <div class='image'>
  <img src=' ... ' />
 </div>

</div>

 

 

 

 

Fiz esse código sem testar, confira se atende seu problema

[William Bruno 1501]

são sempre os mesmos 3 tamanhos de imagem ?

ou os valores de altura não possuem um padrão ?

 

Para fazer aquilo que vc mostrou, vc tem q listar em colunas e não em linhas.

Seria como flutuar 3 DIVs, uma do lado da outra, onde cada DIV tem uma imagem embaixo da outra. Entendeu ?

 

 

@Giovanni Petris, o código q vc sugeriu não atende oq ele precisa.

[Giovanni Petris 0]

Oque tem de errado no código @William Bruno?

[William Bruno 1501]

não resolve o problema do amigo, só isso.

[André do Vale 76]

@William, o código que ele postou é exatamente a sua sugestão, bastando apenas repetir as colunas.column.

 

@R_MontSerrat, apesar do que os amigos sugeriram também se encaixar. O que eu sugiro utiliza um plugin, e faz a organização similar ao do Pinterest (e assim, seus elementos ficam na ordem do HTML idêntica a ordem em que aparecem - esquerda pra direita- ): http://www.wookmark.com/jquery-plugin

 

Ou com javascript: http://benholland.me/javascript/how-to-build-a-site-that-works-like-pinterest/

 

Ou com CSS3: http://cssdeck.com/labs/css-only-pinterest-style-columns-layout