Gleichzeitige automatische Regulierung der Höhen und Breiten von Seitenelementen

Shinophyte

Grünschnabel
Hallo,

Zunächst möchte ich ein Bild posten an dem sich mein Problem besser erklären lässt:

auto_1.png

Dabei soll zunächst die Anzahl der Spalten automatisch reguliert werden (je nach Auflösung und Kachelanzahl). Dies lässt sich wunderbar über „margin-right:auto“ umsetzen, aber die zusätzliche automatische Anpassung der Kachelhöhe je nach anzuzeigendem Inhalt erscheint mir doch recht problematisch. Wie ich schon in Erfahrung bringen konnte, gibt es keine „auto“ Einstellung für „margin-bottom“. Aber über „display:inline-block“ würde sich die Höhe der Kacheln zumindest automatisch anpassen. Nur bestimmt dabei die längste immer den Abstand zur nächsten Zeile. Wie hier zu sehen:

auto_2.png

Meine Frage gibt es Möglichkeiten, das mit reinem CSS zu realisieren?

Ich hab schon über einen Wraper pro Spalte nachgedacht, nur ist dies mit einer dynamischen Seitenbreite kaum mit reinem CSS umzusetzen oder? Man müsste ja die Seitenbreite prüfen und daran dann die Anzahl bestimmen und die passenden Kacheln einsortieren :(

auto_3.png

Danke schon einmal für jede Antwort :)
 
Das mit den Wrappern sieht mir am sinnvollsten aus, vielleicht könnte man von denen als "width" ne Prozentangabe machen(dass sie sich flexibel nach Browsergröße anpassen)...und per "media-dingsbums-Angabe" (mir fällt grad der Name nicht ein) sagt man aber das, z.B. ab Browserbreite X nur noch zwei Wrapper/Spalten angezeigt werden (die letzte könnte man dann drunter anzeigen lassen).
 
Vielleicht sollte man das Füllen der Wrapper-divs bei onload() und onresize() einem JS-Script überlassen. (was ja nicht mehr Deinem Anliegen "reines css" entspricht..)

mfg chmee
 

Neue Beiträge

Zurück