Check alle échte Black Friday-deals Ook zo moe van nepaanbiedingen? Wij laten alleen échte deals zien

[CSS] Floating divs recht op regel krijgen

Pagina: 1
Acties:

  • Millennyum
  • Registratie: Januari 2001
  • Laatst online: 04-05-2023
Beetje vage titel, maar ik zal het proberen uit te leggen.

Ik heb op een pagina een aantal kleine divjes met vaste breedte en variabele hoogte, die via een float:left naast elkaar komen te staan mits daar ruimte voor is op de pagina.

Ik wil nu dat als de divjes op een volgende regel komen, de top van die divjes overal gelijk loopt.

Voorbeeld van de ideale situatie (op breed en smaller scherm):
Afbeeldingslocatie: http://www.alice-in-wonderland.net/download/divs_ideaal.jpg

Maar omdat de hoogte van de divs niet altijd gelijk is, komt het voor dat sommige divjes achter de hogere 'blijven haken'.
Voorbeeld van de huidige situatie:
Afbeeldingslocatie: http://www.alice-in-wonderland.net/download/divs_fout.jpg

Ik weet even niet meer hoe ik dit zou kunnen oplossen. Ik weet namelijk niet van tevoren hoeveel divs er op een regel passen, en hoe hoog deze zijn. Dat verschilt per bezoeker / per pagina. Een 'clear' ofzo kan ik dus niet gebruiken. Kan iemand meedenken hoe ik dit zou kunnen oplossen?

  • Millennyum
  • Registratie: Januari 2001
  • Laatst online: 04-05-2023
...niemand?

  • beetle71
  • Registratie: Februari 2003
  • Laatst online: 24-11 16:50
Ik zal meteen wel een paar 'semantics'-rakkers om mijn oren krijgen, maar volgens mij kan je dit toch wel onder tabulaire data scharen, en kun je er dus een <table> voor gebruiken.

Ah, ik zie dat je niet weet hoeveel er naast elkaar komen, dan heb je ook aan een tabel niks.

Ik heb dit laats bij iets soortgelijks opgelost, door met een javascript loopje erdoorheen te wandelen en ze allemaal op een vaste hoogte te zetten. (huidige hoogte naar boven afronden op veelvoud van bijv. 150px, evt. nog rekening houdend met marges en borders). en ze allemaal te floaten.

Het levert dan nog steeds 'gaten' op als je bijvoorbeeld in een rij de eerste '1'-hoog krijgt en de tweede '3'-hoog. het gat onder de eerste krijg je daarmee nooit gevuld.
En om een optimale vulling uit te gaan rekenen.... dat kan wel, maar is niet makkelijk.
Maar in ieder geval lijnen ze allemaal netjes aan elkaar.

  • disjfa
  • Registratie: April 2001
  • Laatst online: 04-11 11:05

disjfa

be

Als de hoogte niet altijd gelijk is kan je dit niet oplossen. Aangezien je dan elke keer hetzelfde resultaat zult krijgen. Dan kan je heel moeilijk doen of tabellen gebruiken. Aangezien je het tabulair wilt presenteren.

disjfa - disj·fa (meneer)
disjfa.nl


Verwijderd

Verder niet diep over nagedacht maar het eerste wat in mij opkomt is om bijvoorbeeld de scherm resolutie uit te lezen en op basis daarvan het aantal plaatjes bepalen dat op 1 regel kan (width stond vast volgens je TS) en na elke regel met pics een lijn spacer (hr/div/transparante pic ofzo) erin gooien? Zou makkelijker zijn als je een vaste layout breedte hebt.

t.net heeft er ook last van in de fotoalbum overigens.