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

[R_MontSerrat]

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 são 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/

alguém tem alguma ideia de como posso fazer? Urgente!!

Obrigado

[dedas]

Cara,

Você vai ter que criar um loop dentro de outro loop pra fazer isso. Tenta entender a lógica: Você vai dar um loop em uma div chamada coluna. Dentro dessa div coluna, você vai dar um loop nas imagens. Lembrando que você tem que definir uma largura fixa na div coluna, pois só assim você vai conseguir fazer com que as imagens fiquem uma embaixo da outra, formando aquela grade de imagens.

Vamos a um exemplo bem rápido:

<style type="text/css">
.coluna{ width:200px; float:left; margin-right:10px;}

.imagem{ float:left; clear:left; margin-bottom:10px;}
.imagem_1{ width:100%; height:150px; background:#f00;}
.imagem_2{ width:100%; height:250px; background:#ff0;}
.imagem_3{ width:100%; height:350px; background:#000;}

.margin_zero{ margin:0px !important;}
</style>

<?php
//Vamos supor que a área de conteúdo do seu blog seja de 830px.
for($i=1;$i<=4;$i++){
    $class = "";
    if($i == 4){ $class = " margin_zero";}
    
    echo "<div class='coluna".$class."'>";    
    for($z=1;$z<=3;$z++){
        echo "<div class='imagem imagem_".$z."'>&nbsp;</div>";
    }
    echo "</div>";
}
?>

Editado Fevereiro 6, 2013 por dedas