[mitchm]

Schönen guten abend zusammen,
schon beim Titel merke ich dass diese Frage ziemlich schwierig wird:P

Also folgendes...

ich ein div... in diesem div habe ich mehrere ul's

mein div style

    display: inline-block;
    vertical-align: top;

dh. ich setze alle meine ul's nebeneinander

sobald er in der breite nicht mehr weiter kann geht der in die nächste "zeile" und füllt die ul's dort auf....

wenn ich nun ein ul mit zb. 5 li's habe und die anderen mit weniger als 5, dann fängt der ul in der neuen zeile erst ab der höhe von dem größten an....
ich habe mal ein bild gemacht zum verständnis..... (Bild1)

ich will nun dass die ul's direkt untereinander sind.....(Bild2)

bitte beachtet... die sind nicht fix ... die werden dynamisch mit einer schleife in PHP erstellt... kann also sein das erst 10 ul's sind... aber beim nächsten mal nur noch 2...
außerdem muss es auch funktionieren wenn ich den browser zoome...
beim einer größeren auflösung passen natürlich mehr ul's in einer zeile

[MrMurphy]

Hallo,

so wie du dir das wünschst geht es nicht mit HTML / CSS. Den Wunsch der Anordnung gibt es auch immer wieder mal mit Bildern.

Ich meine mal gelesen zu haben das es ein Programm geben soll, das die Größe der Container berechnet und dann mittels absoluter Positionierung anordnet. Das Ergebnis war meiner Ansicht nach aber wohl nicht responsive. Außerdem müssen die Daten an das Progamm wohl immer manuell übergeben werden.

Du könntest die Container in einer Reihe auch gleich hoch machen. Wenn sich der Inhalt aber extrem unterscheidet sieht das auch nicht mehr gut aus.

Abhilfe könnte auch die CSS-Möglichkeit multicolumn schaffen. Die Optik passt wie von dir gewünscht. Die Anordnung geschieht automatisch. Die Anzahl der Spalten kann je nach Fensterbreite angepasst werden.

Die Frage ist nur wie wichtig die Reihenfolge der Container ist. Die Spalten werden wie bei einem Spaltensatz üblich von oben nach unten aufgefüllt.

Alle halbwegs aktuellen Browser unterstützen multicolum, es sind nur Präfixe erforderlich. Da nur wenige CSS-Angaben erforderlich sind ist das aber nicht dramatisch.

Siehe auch: CSS3 im Praxistest: Multi-column Layout | Webkrauts

Gruss

MrMurphy