6

Tenho a seguinte situação: Busco do banco de dados os resultados e exibo eles desta forma

<div style='background-color:#fff;width:260px; margin-left:5px;margin-top:5px;float:left;'> texto </div>

vou mostrar com imagem para facilitar

as divs seguem uma linha

minha duvida e como posicionar para que fique dessa forma, ja tentei display:cell e clear:both sem resultado

o resultado final seria esse inserir a descrição da imagem aqui

0

2 Respostas 2

4

Se você alterar sua lógica para dividir os campos do banco em colunas você pode implementar o seguinte:

JSFIDDLE

CSS:

#left {
  float:left;
  width:220px;
}
#teste {
  border: 1px solid;
  background-color:#a3a2f1;
  width:200px;
  margin-left:5px;
  margin-top:5px;
  float:left;
  padding: 4px;
}

HTML:

<div id="left">
  <div id="teste">texto</div>
  <div id="teste">texto
    <br>texto
    <br>texto
    <br>
  </div>
  <div id="teste">texto</div>
  <div id="teste">texto</div>
</div>
<div id="left">
  <div id="teste">texto
    <br>texto
    <br>texto
    <br>
  </div>
  <div id="teste">texto</div>
  <div id="teste">texto</div>
  <div id="teste">texto</div>
</div>
<div id="left">
  <div id="teste">texto</div>
  <div id="teste">texto</div>
  <div id="teste">texto</div>
  <div id="teste">texto
    <br>texto
    <br>texto
    <br>
  </div>    
  <div id="teste">texto</div>        
</div>
4

Fazer as divs se empilharem dessa forma (parecida com o Pinterest) não é possível apenas com CSS. Existe uma biblioteca para permitir exatamente este tipo de comportamento que você busca, a Masonry.

Confira aqui a lista de métodos da biblioteca.

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 .