Kilka div obok siebie

Czesc.
Robie sobie galerie zdjec.
Lista miniaturek, dla kazdej miniaturki podpis - to wszystko w jednym divie z float: left;

I Teraz jesli powiedzmy mieszcza sie w rzedzie po 5 miniaturki i kazda ma np. po dwie linijki opisu to wszystko jest ok i w nastepnej linii wyswietlaja sie kolejne 5 miniaturki z podpisami.

Ale teraz jesli ostatnia miniaturka w rzedzie ma jednolinijkowy opis (a wiec caly div ma mniejsza wysokosc) to 5 miniaturka, ktora powinna sie pojawic w nastepnym rzedzie z lewej strony pojawia sie bezposrednio pod 5 zdjeciem pierwszego rzedu zdjec.

Czy da sie to rozwiazac ustalajac jakies wlasciwosci css dla diva trzymajacego miniature i opis?
Czy jest konieczny jakis element rozdzielajacy poszczegolne rzedy zdjec?
Jak ma wygladac taki css?

Tutaj screen obrazujacy problem:

http://img713.imageshack.us/i/clipboard01da.jpg/

Daj pierwszemu divowi w każdym wierszu clear: left. Aby dać tę deklarację tylko pierwszemu divowi w każdym wierszu, będziesz musiał prawdopodobnie dać "co piątemu" divowi jakąś klasę i potem użyć jej w selektorze. Pewnie będzie to klasa prezentacyjna w stylu "first-row". Albo to, albo coś w stylu "podzielny-przez-5" (gdy numerujemy divy od zera ;) ).

Obyłoby się bez tej klasy, gdyby wszystkie popularne przeglądarki obsługiwały selektor nth-child. Niestety, IE (do IE8 włącznie) go nie obsługuje.

Aha: w temacie piszesz o divach, ale warto pamiętać, że to nie ma najmniejszego znaczenia. Mógłby to być span czy (prawie) dowolny inny element. W tym przypadku, gdy masz listę zdjęć, warto rozważyć użycie elementów ul oraz li, a nie spamować divami. Divów używamy tylko wtedy gdy żaden inny element nie pasuje. Div sam w sobie nic nie znaczy.

ustaw stałą wysokość dla div'ów.

@ŁF:
W tym przypadku chyba mamy do czynienia ze sporym zakresem objętości tekstu pod obrazkami. A więc i wysokość jest dość mocno zmienna. Wprowadzenie stałej wysokości -- równej maksymalnej "spodziewanej" wysokości -- może nie być najszczęśliwszym rozwiązaniem. Choć w pewnych okolicznościach, gdy teksty są krótkie czy nie odbiegają od siebie za bardzo objętością, ustalenie wysokości sprawdza się doskonale.

a ja bym po prostu dał po każdym wierszu takie coś:

<div style="clear: both;"></div>

Najprostszy sposób z możliwych. Divy mogą się strasznie różnić wielkością, a jednak zawsze będą wyrównane (do góry) i nie będzie żadnego problemu.

a jak chcecie to zrobić, kiedy nieznana jest ilość kolumn?

Widzę tylko takie rozwiązania:

1. Stała wysokość kolumn
2. Stała liczba kolumn
3. Javascript

Ja bym połączył 1 z 3 i stylem overflow:auto
wtedy bez obsługi javascriptu pojawiają nam się suwaki przy dużej liczbie tekstu, co nie wygląda źle (pewnie lepiej niż jedna kolumna która rozszerze cały wiersz i połowa pustej strony), a przy włączonej obsłudze wszystko wygląda tak jak chcesz

ŁF napisał(a)

a jak chcecie to zrobić, kiedy nieznana jest ilość kolumn?

Wtedy pewnie zastosowałbym stałą wysokość kolumn (+suwaki), ew. jakieś rozwiązanie JavaScriptowe. Inaczej chyba się nie da. Najlepsze, co mi przychodzi do głowy, to to o czym napisał Szanowny Pan @gfsdgds. Suwaki w razie potrzeby bez JS-u, a gdy JS -- można dynamicznie ustalić równą wysokość kolumn w każdym wierszu.

Jednak to się ma nijak do tego przykładu. Autor bardzo wyraźnie, wielokrotnie napisał, że chodzi o konkretną liczbę kolumn: 5. Czyli liczba kolumn jest jak najbardziej znana. Czy może coś przegapiłem...?

Widziałem rozwiązanie problemu przez użycie

Dzieki wszystkim za odpowiedzi, w szczegolnosci koledze bswierczynski.
clear: left; dla pierwszego elementu w rzedzie daje dokladnie taki efekt jakiego oczekiwalem :)
Zgodnie z zaleceniem zastosowalem tez tagi UL/LI.

Jesli chodzi o robienie galerii na tabeli to mi nie przypadlo do gustu ze wzgledu na koniecznosc wiekszych kombinacji po stronie serwera.

Dzieki i pozdrawiam

bswierczynski napisał(a)

ŁF napisał(a)

a jak chcecie to zrobić, kiedy nieznana jest ilość kolumn?

Autor bardzo wyraźnie, wielokrotnie napisał, że chodzi o konkretną liczbę kolumn: 5. Czyli liczba kolumn jest jak najbardziej znana. Czy może coś przegapiłem...?

nic nie przegapiłeś, jestem ciekaw pomysłowego rozwiązania bardziej ogólnego problemu.