[HTML] <ul> mit Umbruch

[Mini-Leopard]

Hallo ihr lieben!

Ich habe eine dynamisch erstellte Liste nach dem Prinzip <ul><li></li></ul>
Diese habe ich in einem div, dessen Größe an die Fenstergröße angepasst wird.

Nun möchte ich, dass die Liste rechts fortgesetzt wird, wenn sie länger ist, als der div, in welchem sie enthalten ist.
Sprich, wird das Fenster verkleinert oder die Liste verlängert, soll sie rechts neben der ersten Reihe fortgesetzt werden.

Wie kann ich das umsetzen?


Liebe Grüße
…

 

[drp]

Vielleicht mit CSS für die <li> Display auf inline-block setzen?
( zum Beispiel: <li style="display: inline-block;"></li> )

 

[xtj7]

Mit HTML5 sind solche Spalten relativ einfach machbar, aber der gesamte Inhalt wird dabei immer auf die angegebene Spaltenanzahl verteilt. Das ist also nicht genau das, was du möchtest. Wenn du deine Anforderungen unbedingt erfüllt haben willst, kommst du um JavaScript nicht herum
Falls du Kompromissbereit bist, schau dir mal folgendes an:
http://www.quirksmode.org/css/multicolumn.html

JavaScript Ansatz:
- Viewport Höhe ermitteln
- Top Position ermitteln
- alle Elemente in ein Array packen
- eine Schleife die alle Elemente abarbeitet und nach jedem Element prüft, ob die zulässige Gesamthöhe (Viewport - Top Position) überschritten wurde, wenn ja: Element löschen, nachfolgendes UL erstellen (mit float: left; o.ä.) und dieses weiter befüllen

 

[drp]

Wieso nicht? Mit display:inline-block müsste es auch komplett ohne JS funktionieren.