Posicionamento de li's

[julioalves1987 0]

Boa noite pessoal.

 

Estou desenvolvendo uma página e precisava listar vários li's abaixo e ao lado um do outro, porém, sem levar em conta a altura do li mais alto. Como o conteúdo que cada li traz é diferente, geralmente quando uso o float:left, a partir da segunda linha de registros, ele começa a posicionar abaixo a partir da altura do mais alto, e não é isso que queria. Precisava que os li's das linhas seguintes se encaixassem no "espaços" que sobram devido as variações de altura.

 

Fiz um esquema para entenderem melhor:

Espero que alguém possa me ajudar, se for preciso utilizar javascript, também pode ser!!

 

a estrutura que tenho é bem básica:

 

<ul>
 <li><p>conteudo</p></li>
 <li><p>conteudo</p></li>
</ul>

 

Obrigado pessoal

[GRiLLo 11]

Pow, fiz uns testes via css, mas não consegui não...

Se tivesse atrasado para a entrega, eu faria 3 UL's listadas para baixo mesmo...

Se tivesse com um pouco mais de tempo, faria apenas 1 lista li e via JS eu dividiria a quantidade de LIs por 3 e criava via JS as 3 ULs (para melhorar o SEO)...

Se tivesse mais tempo ainda, daria uma pesquisada mais profunda na web ou esperaria alguém com mais dicas para ajudar.

[julioalves1987 0]

Bom dia GriLLo, eu também testei de várias maneiras, creio que tenha que utilizar js mesmo, mas não manjo muito, então fiz normal, com os Li sendo listados de acordo com a altura...o cliente aceitou, então está ótimo! :)

Mas eu ainda gostaria de aprender a fazer, se alguém souber pelo menos um termo que possa usar como pesquisa no ggole, já ajuda muito!

[Lucas Perdidão 1]

Bom, com CSS puro acho bem difícil chegar nesse resultado, que é chamado de masonry.

O jeito mais simples de fazer é com o plugin jQuery homônimo que você encontra aqui: Masonry jQuery

[William Bruno 1501]

uma forma simples de fazer isso apenas com css, é fazer 3 colunas.

 

cada coluna com 2 lis.

[Lucas Perdidão 1]

uma forma simples de fazer isso apenas com css, é fazer 3 colunas.

 

cada coluna com 2 lis.

 

Se for estático sim, mas se o conteúdo for carregado dinamicamente, fica um pouco mais complicado.

[William Bruno 1501]

nem tanto.. se for dinâmico, basta uma simples conta matemática =)