"Interlocking" Divs

[vragenfreak92]

Ik zou graag het volgende in css willen:

Waarin elke box een div is. Ik heb het een en ander geprobeerd. Maar als ik

[CPP]float:left;[/CPP]

doe, komen er grote gaten, omdat de volgende rij begint onder de hoogste div.

 

[Naarling]

ik kan wat je laat zien in dat plaatje niet zo een twee drie reproduceren. Heb je een online voorbeeld van je code?

 

[vragenfreak92]

ik kan wat je laat zien in dat plaatje niet zo een twee drie reproduceren. Heb je een online voorbeeld van je code?

Jep, kijk even op http://forrst.com/snaps?sort=popular

 

[Naarling]

ah, ik zie dat ik je vraag verkeerd begrepen heb, ik dacht dat je die situatie nou juist wilde vermijden. Zo te zien heeft die site het met javascript gedaan. Hoe precies weet ik ook niet.

EDIT: Om deze situatie te bereiken zou je natuurlijk ook drie kolommen in je HTML kunnen maken en daar je blokken in zetten.

 

[csshunter]

De forrst.com site is momenteel uit de lucht, dus of ik er misschien flink naast zit, kan ik niet zien.

Maar hier is een javascript-voorbeeld waarmee in drie kolommen zo min mogelijk gaten worden gemaakt bij een willekeurig aantal <li>'tjes die als box-houder werken (geen divvies):

• www.developerscorner.nl/css-exercitions/boxes-in-3-columns.htm
• Zie broncode voor de simpele html-structuur.
• Dit gaat uit van een vaste volgorde van de boxes. Als de boxes van plaats mogen wisselen om er beter op te passen, is een uitgebreider script denkbaar: waarin boxes bv. van kolom 1 naar kolom 3 worden verplaatst.

Met vriendelijke groet,
CSShunter