Ir para conteúdo
Fórum Script Brasil
  • 0

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


R_MontSerrat

Pergunta

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

Link para o comentário
Compartilhar em outros sites

1 resposta a esta questão

Posts Recomendados

  • 0

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 por dedas
Link para o comentário
Compartilhar em outros sites

Participe da discussão

Você pode postar agora e se registrar depois. Se você já tem uma conta, acesse agora para postar com sua conta.

Visitante
Responder esta pergunta...

×   Você colou conteúdo com formatação.   Remover formatação

  Apenas 75 emoticons são permitidos.

×   Seu link foi incorporado automaticamente.   Exibir como um link em vez disso

×   Seu conteúdo anterior foi restaurado.   Limpar Editor

×   Você não pode colar imagens diretamente. Carregar ou inserir imagens do URL.



  • Estatísticas dos Fóruns

    • Tópicos
      152,3k
    • Posts
      652,5k
×
×
  • Criar Novo...