1

Como faço para organizar muitas divs col-xx-3 de alturas diferentes?
Existe alguma classe ou algum outro metodo sem usar row (a cada 4 produtos)?
Alguma forma que não precise mudar o Select ou o PHP?

inserir a descrição da imagem aqui

inserir a descrição da imagem aqui

Já tentei de várias formas porém não consegui. Tentei mudar o Select já, e o PHP também, porém sempre caí em algum problema bem maior.

Lembrando que não tenho muita prática. Estou aberto a qualquer ideia!

Agradeço a todos!

(algumas coisas no layout ainda vão mudar, a imagem é só de demostração)

4
  • Não entendi muito bem como você quer essa organização. Poderia explicar melhor?
    – Randrade
    Commented 19/04/2016 às 14:33
  • me desculpe pela confusão, mas pode ver na imagem que as divs estão desorganizadas, queria algo alinhado superior, sem esse espaço em branco ao lado esquerdo (por exemplo). @Randrade
    – Lucas
    Commented 19/04/2016 às 14:39
  • Então, existem sites que buscam essa "desorganização" de tamanhos como requisito de layout. No seu caso, você quer que fique colado uma na outra e com um tamanho fixo? E o texto, tem problema cortar ou irá adicionar um espaço em branco nos que não possuírem texto suficiente?
    – Randrade
    Commented 19/04/2016 às 14:42
  • Sim, eu já vi esses layouts 'desorganizados', porem nesse caso, imagino, que é melhor manter uma organização mais severa, (devido ao publico alvo e outras questões). Assim, planejava manter as imagens e titulos alinhados, e se sobrasse espaços abaixo entre um produto e outro seria melhor que espaços de produtos "faltando" como está acontecendo. @Randrade
    – Lucas
    Commented 19/04/2016 às 14:48

4 Respostas 4

2

Bom, sobre a margem entre as div's, basta alterar o CSS em sua página, alterando a margem.

.col-md-3{
  margin: 0 5px 5px 0;
}

Em relação ao tamanho, creio que você não saiba o tamanho de cada texto para definir o min-heigth da página, então aconselho utilizar jQuery para obter o maior tamanho de cada div e setar o heigth igual para todas.
Ficaria mais ou menos assim:

 $(document).ready(function() {
   var maxHeight = -1;

   $('.col-md-3').each(function() {
     maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
   });

   $('.col-md-3').each(function() {
     $(this).height(maxHeight);
   });
 });

Veja um exemplo funcionado no JsFiddle.

Referências: Use jQuery/CSS to find the tallest of all elements.

Se quiser alterar o tamanho por blocos, pode separar o valor do maxHeigth em cada bloco, desta forma:

$(document).ready(function() {
   var maxHeight = -1;

      $('.row').each(function() {

       $(this).find('.col-md-3').each(function() {
         maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height();
       });

       $(this).find('.col-md-3').each(function() {
         $(this).height(maxHeight);
       });

   });
 });

Exemplo funcional no JsFiddle.

7
  • Apenas lembrando, o bootstrap ajuda muito no desenvolvimento, mas ele não resolve todos os nossos problemas. O que você deseja seria melhor se você mesmo fizesse um CSS de acordo com a sua necessidade, onde teria blocos para cada tamanho, e na criação do produto setaria qual o tamanho precisaria. Isso daria uma melhor organização em sua tela, da forma que deseja.
    – Randrade
    Commented 19/04/2016 às 15:15
  • Sim, bootstrap é muito bom, mas sempre acabo mudando muita coisa, além de criar um extenso CSS para atender o que preciso. Eu entendi a sua ideia, mas tem um caso que a maior col-xx-3 é muito grande, e acaba desconfigurando todo o resto da pagina com espaços muito grandes, teria como ajustar isso?
    – Lucas
    Commented 19/04/2016 às 16:53
  • Mas no caso o que você quer que seja feito em relação a isso? Você disse que não teria problemas em deixar um espaço no fim. Você quer que corte ou o que?
    – Randrade
    Commented 19/04/2016 às 16:57
  • A questão mesmo, é que o espaço maior não ficou somente embaixo dos 'vizinhos' do maior, mas sim de todos, e acaba que linhas, com 1 produto ou alturas pequenas ficam com espaços muito grandes, entende? Eu terei de ver como exatamente ficaria essa organização, se fosse possível adicionar a maior altura de cada linha seria o ideal, eu imagino, mas não sei ao certo e nem executar.
    – Lucas
    Commented 19/04/2016 às 17:51
  • @Lucas Nesse caso você pode fazer por blocos, ao invés de fazer em tudo.
    – Randrade
    Commented 19/04/2016 às 17:53
1

Você pode definir uma altura fixa máxima para os elementos, no seu caso ai, os itens estão aglomerando pois tem uns com altura maior que o outro. Se colocar a altura das class="col-sm-3" nesse caso ai em 200px por exemplo por padrão, resolverá o problema!

5
  • Eu tentei realizar dessa maneira. Desse jeito algumas divs se sobrepõem às outras de baixo, e ainda ficam alguns espaços em branco (como na imagem)
    – Lucas
    Commented 19/04/2016 às 14:43
  • Está online? Pode passar o link para dar uma olhada?? Commented 19/04/2016 às 15:24
  • Coloquei online aqui, está como exemplo 300px, mas se vc inspecionar e mudar dará pra ver melhor: link
    – Lucas
    Commented 19/04/2016 às 17:21
  • Para mi aqui apareceu normal, tudo certinho, sem espaços em brancos. Commented 19/04/2016 às 19:35
  • Eu fiz algumas correções e fixei um tamanho médio, mas terei que alterar alguns registros e limitar o tamanho dos textos para não haver muita variação
    – Lucas
    Commented 20/04/2016 às 13:01
1

Pode fazer um PHP, criando uma soma antes de listar cada lista, se a soma for = 4 que é a quantidade de Li por linha, joga uma div clearfix e zera a soma para efetuar novamente, outra dica é utilizar o mansory, já ouviu falar? segue alguns links, ele ajusta as Li: http://masonry.desandro.com/ http://isotope.metafizzy.co/layout-modes/masonry.html

Caso queira seguir o exemplo em php, jogue o código no plunker que lhe ajudo!

1
  • Tentei utilizar 'clearfix' nas divs mas não fez diferença, todos os thumb já estão em class="box clearfix". Eu gostei da ideia do masony, vou tentar usar aqui e se tiver alguma duvida comentarei aqui :)
    – Lucas
    Commented 19/04/2016 às 15:02
1

A melhor forma é com a classe "row"

1
  • Sim, mas no caso da classe row eu teria que mudar muita coisa no PHP, e isso ja começa a complicar bem mais. Mas se eu não consguir uma solução terei que arrumar uma maneira de usar row.
    – Lucas
    Commented 19/04/2016 às 16:55

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .