Sistema de blocos de conteúdos

[rikaschmitt 54]

Galera, boa tarde.

Estou precisando criar um sistema de blocos de conteúdos, que vão se alocando automaticamente na página, independente do tamanho da <div> de cada conteúdo. Mais ou menos assim:

 

 

Conforme for tendo mais conteúdo, as <div> vão se ajustando, uma ao lado da outra e tals.

 

Tentei fazer de um jeito simples, usando apenas float, mas não deu muito certo.

Tentei usar um plugin, o "Salvattore", mas achei muito complicado para uma aplicação simples que é a minha.

 

Alguém tem uma sugestão? De preferência sem plugin, algo mais puro.

[Lucas Santos Brito 12]

Leia sobre a propriedade Display, deve te ajudar.

Abraços.

[rikaschmitt 54]

Leia sobre a propriedade Display, deve te ajudar.

Abraços.

 

Sim, tbm já tinha tentado usar com display, mas não deu muito certo.

valeu.

Pesquisei na net e consegui utilizando as propriedades "column" do css.

Exemplo:

 

CSS

.coluna {-moz-column-count: 3;
-moz-column-gap: 10px;
-moz-column-fill: auto;
-webkit-column-count: 3;
-webkit-column-gap: 10px;
-webkit-column-fill: auto;
column-count: 3;
column-gap: 15px;
column-fill: auto;
}
.div {
-moz-column-break-inside: avoid;
-webkit-column-break-inside: avoid;
column-break-inside: avoid;
}

HTML

<div class="coluna">
   <div class="div">conteudo 1</div>
   <div class="div">conteudo 2</div>
   etc..
</div>

É uma propriedade que eu não conhecia.

Muito bacana.

 

:)