Divs naast elkaar plaatsen, afhankelijk van lengte

[Leon d]

Hallo,

Zie afbeelding.
Ik wil graag dat mijn divs onderelkaar komen te staan, maar deze mogen niet uit het zwarte vlak vallen. Dus in het geval van de afbeelding moeten de divs child4 t/m 6 rechts naast 1, 2 en 3 komen te staan. Ook als child3 iets langer zou zijn dan moet deze naast child 1 komen te staan. De inhoud van deze child divs wordt gevuld met links uit de database. Vandaar dat deze lengtes variabel zijn.
We hebben verschillende dingen geprobeerd in css maar komen er niet uit. Weet iemand hier een oplossing voor?
alvast bedankt!

 

[That Guy]

hm, ik weet niet of dat gaat lukken. Normaal gesproken zou je 'float: left'; gebruiken, MAAR omdat je de childs onder elkaar wilt 'sorteren' in plaats van links-naar-rechts, gaat dit niet lukken.

Het kan dus wel heel makkelijk als je ze 'een kwartslag draaid'. Maargoed, dat is je vraag niet. In ieder geval, het is niet heel makkelijk op te lossen.

Mischien, als de childs een vaste breedte hebben (altijd uitgaan van wat niet veranderd) kan je iets fabriceren dat met meerdere 'zwarte divs' werkt, dus een soort van kolommen maken. Als een child dan erbuiten valt, verplaats je m naar de kolom er rechts van. Maar daar heb je waarschijnlijk javascript voor nodig.


:thumb:

 

[Leon d]

hm, ik weet niet of dat gaat lukken. Normaal gesproken zou je 'float: left'; gebruiken, MAAR omdat je de childs onder elkaar wilt 'sorteren' in plaats van links-naar-rechts, gaat dit niet lukken.

Het kan dus wel heel makkelijk als je ze 'een kwartslag draaid'. Maargoed, dat is je vraag niet. In ieder geval, het is niet heel makkelijk op te lossen.

Mischien, als de childs een vaste breedte hebben (altijd uitgaan van wat niet veranderd) kan je iets fabriceren dat met meerdere 'zwarte divs' werkt, dus een soort van kolommen maken. Als een child dan erbuiten valt, verplaats je m naar de kolom er rechts van. Maar daar heb je waarschijnlijk javascript voor nodig.


:thumb:

Hoi Vegras,

Bedankt voor je reactie. Wat jij zegt dacht ik inderdaad ook al, alleen hoopte ik dat iemand een andere oplossing wist. Helaas. Ik denk dat we de divs nu handmatig plaatsen, en elke onder elkaar staande divs in een aparte div plaatsen.

iig bedankt!

 

[That Guy]

aye, maar:

De inhoud van deze child divs wordt gevuld met links uit de database.

neem dus even aan dat je met een server-side iets werkt? (php?) In dat geval, en je wilt moeilijk doen, kan je zoiets doen:

bekijk de hoogte van elke child-div. Dit's dus wss lastig vanwege plaatjes, vulling, texthoogte, etc etc. Maargoed.
Je gaat loopen. Houd de hoogte van elk child bij, tel ze op, totdat je hoger bent dan de zwarte div. Kijk dan welk child er over heen ging, en sla dat op.
Dan weet je dus welke 2/3/n divs links moeten.

Herhaal dit, 'met elke kolom'. Als je alles weet en hebt opgeslagen, kan je dus je divs gaan ordenen. ofwel, begin met 1 en een float: left, dan met 3 of 4 of n die je er rechts van zet, dan 6 of 7 of n die daar rechtrs van zit, etcetera.​

ik weet niet of je me volgt, ik weet niet of dit werkt (en als het werkt is het wel veel moeite) dus ik zou iets anders zoeken, maargoed.

 

[gast0231]

Eeey, helpy het als je ze in een speciale DIV zet waarin je een bepaalde hoogte vast hebt gesteld???

 

[Leon d]

Eeey, helpy het als je ze in een speciale DIV zet waarin je een bepaalde hoogte vast hebt gesteld???

Nee helaas niet. Want dan komen de child divs eerst van links naar rechts naast elkaar. Als deze dan van links naar rechts gevuld is, dan begint het op de volgende regel. Iig bedankt voor je reactie.