Witam wszystkich.

Nie mogę się uporać z jedną rzeczą.
Chciałbym ustawić kilka, kilkanaście (liczba zmienna) DIVów w kilku (też nie określona liczba) rzędach, w taki sposób:
[1][5][9]
[2][6][...]
[3][7]
[4][8]
Wysokość i szerokość diva nadrzędnego równiez może ulec zmianie.

Chciałbym w ten sposób uzyskać efekt podobny do tego na pulpicie z ikonkami.

Mam nadzieję że pomożecie

Takie coś jakoś ?

Wyjścia są w sumie dwa, ale w obu i tak opiera się całość na nadawaniu elementom opływania (float). Najlepiej gdy wszystkie elementy mają tę samą wysokość i szerokość. Wtedy się ładnie układają w siatkę. Różnica polega jedynie jak blokuje się opływanie. Można:
a) objąć elementy pływające w blok z nadanym overflow: hidden
zablokować pływanie elementów, umieszczając za nimi block z ustawionym clear:both lub przynajmniej z tej strony, w którą elementy płyną.

To co kolega wyżej proponuje to już haczy o html5 i layout wielokolumnowy (column-count, column-gap), a z jego osługą choć już dobrze w miarę, to jednak wychodzi sprawa kompatybilności przeglądarek.

A display: inline-block? http://designshack.net/articles/css/whats-...y-inline-block/

Myślę, że bez JS i paru obliczeń typu: ilość divów, szerokość formy oraz każdego diva wewnątrz niej i analogicznie wysokość. Będzie to dość trudne, a może nawet niewykonalne w samym CSS
Jeśli jednak masz parę stałych, to można pokombinować z tym co napisał @Szymciosek . Choć i tak temat dość abstrakcyjny.

@thek o czym Ty piszesz



No ok, tylko jak umieścić [2] pod [1], a później [x] po prawej od [1]? W tym tkwi cały problem. Trzeba każdą kolumnę zamykać w jakichś kontenerach, tylko w jakich? O jakich długościach i szerokościach, kiedy akurat ma się skończyć dana kolumna, żeby było to wszystko ładnie ułożone?

Dzięki wszystkim za sugestie, wydaje mi się, że tak jak pisze Damonsson, pozostaje tylko JS!
No nic. Bede próbował.

Myślę, że to Cię zainteresuje: http://yconst.com/web/freetile/

Raczej o CSS3 (o; Można korzystać z własności CSS3 bez użycia HTML5, ale to tak btw.

Najlepiej wykorzystać column-count tak jak pisał Szymciosek + Modernizr do wykrywania czy dana przeglądarka wspiera column-count i jeśli nie, to załadować alternatywny skrypt JS np ten który podał erix. Nie widzę powodów, żeby nie skorzystać z column-count w przeglądarkach które już to wspierają.

Tak css3 Po prostu jakoś mi te oba tak zawsze w parze idą Niby można do html4 czy xhtml pchać css3... Pytanie tylko "Po co?", skoro html5 daje nam trochę większe możliwości, a zważywszy na fakt, iż wsparcie zarówno html5 jak i css3 jest identyczne (czytaj: każda z przeglądarek ma to w jakimś stopniu ogarnięte, ale nie zawsze tak samo interpretują), to już lepiej oba wprowadzać razem. W końcu kiedyś się "wyrówna"

HTML5, to tylko nowy markup, a nie technologie wokół niego. CSS3 != HTML5. I możesz z niego skorzystać nawet w XML/cokolwiek zgodnego z SGML.


O, to teraz, to przyładowałeś, jak łysy grzywą o kant kuli. Get back to the Real World, Neo.


Chciałbym to zobaczyć. Optymizm w przypadku specyfikacji u mnie nie istnieje.

@erix: to co napisałem tłumaczyć można jako: "Zarówno css3 jak i html5 każda przeglądarka wprowadza w tempie jaki jej się podoba. A by było weselej, są pomiędzy przeglądarkami różnice w interpretacji pewnych elementów (zwłaszcza css3), więc to samo na różnych przeglądarkach może inaczej wyglądać. Tak więc można wprowadzać w sumie już to teraz, bo i tak czort wie, kiedy przeglądarki to w końcu prawidłowo zinterpretują"

A co do kiedyś to zauważ jaką emotką to opatrzyłem.