Få CSS til å fylle opp bilder og starte med nederste rad!

[Yaricks]

Hei!

 

Har ett lite problem jeg har jobbet med en stund. Jeg henter ut en gjeng med bilder fra en database, og sorterer de 3 i bredden med CSS. Problemet mitt er det, at jeg som vanlig bare setter en bredde på DIVen og trenger ikke å gjøre så mye; og CSS vil automatisk hive en linjeskift for meg etter tre bilder...Men! Det er ikke helt det jeg vil gjøre.

 

Jeg vil at den skal begynne å fylle opp nedeste raden først med bilder først, slik at den øverste raden skal fylles opp sist, og kan derfor i noen tilfeller har 1, 2 eller 3 bilder.

 

Eksempel her:

 

Den tilvenstre er slik jeg har det i dag, men jeg kunne tenke meg en løsning slik det er til høyre. Er det noen som har peiling på hvordan jeg kan gjøre dette?

 

[torbjørn marø]

Må det være en CSS-only løsning? Usikker på om det lar seg gjøre... Med litt JavaScript burde man lett kunne hacke det til.

 

Da kan du basically finne ut hvor mange bilder du skal ha på øverste rad (ved å telle elementene), og inject'e et "linjeskift" der hvor det trengs.

Endret 5. desember 2011 av torbjørn marø

[Yaricks]

Nei, på ingen måte! Har ikke så alt for mye erfaring, med Javascript, så tenkte ikke så mye på en slik løsning, men dersom du har ett forslag, jeg er klar for det meste!

[agrimsrud]

Du kan prøve å bruke transform:rotate(180deg); til å rotere elementet bildene ligger i opp-ned, og deretter rotere hvert enkelt bilde tilbake. Bør gi en effekt ala det du forespør. Sjekk et eksempel:

http://jsfiddle.net/YAcRk/2/

 

Edit: Bruker CSS3, så vil naturlig nok kun fungere i nyere nettlesere

Endret 6. desember 2011 av agrimsrud