Tobias S.: Horizontal angeordnete DIVs vertikal ausrichten

Beitrag lesen

Hi Antipitch!

Es geht um ein selbst geschriebenes, modulbasiertes CMS. Ein solches Modul wäre z.B. "Gib ein hochgeladenes Bild mit Untertitel aus". Oder "Biete zur hochgeladenen PDF-Datei einen Text-Link mit Größenangabe in KB an". Das Ganze lässt sich theoretisch weiter verkomplizieren. So kann ein Modul ein Tupel aus verschiedensten Dateiausgaben und Texten sein. Oder anders gesagt: Ein Modul könnte sogar eine eigene Mini-Homepage sein.

Welche Module im CMS Verwendung finden bestimmt der Admin des CMS, der die benötigten Module einbindet. Die Module werden zuvor von Autoren verfasst und Erzeugen bei Aufruf HTML-Code aus verschiedenen Teilen der CMS-Datenbank.

Jedes dieser Module soll nun in ein <div> gekapselt werden, um ihm vom Admin des CMS Stylesheets zukommen zu lassen. Würde ich sie in ein <span> packen, dann würden einige Styles (z.B. border) bei mehrzeiligen Textausgaben dem Textfluss folgen statt einen Rahmen um den gesamten Block zu legen. Außerdem würden Block-Elemente innerhalb der Module die Inline-Wirkung des <span> wieder aufheben.

Mein Wunsch ist es nun, die <div>-Blöcke nebeneinander darzustellen. Breite und Höhe des <div> werden dabei vom Inhalt der Modul-Ausgabe gesteuert. Reicht der Platz bei mehreren <div>-Blöcken nicht aus, wird automatisch in die nächste Zeile umgebrochen. Durch die float-Angabe funktioniert das auch alles wunderbar. Ich kann innerhalb des Eltern-Elements <td> bestimmen, ob die Ausgabe links- oder rechtsbündig erfolgen soll. Nur auf die vertikale Ausrichtung habe ich keinen Einfluss.

<td> verwende ich übrigens nur deshalb, weil man darin mit vertical-align vertikal ausrichten kann. Sollte eine andere Lösung möglich sein, dann kann ich die Tabelle auch durch ein <div> oder etwas anderes ersetzen. Nur fehlen mir dazu leider die Ideen.

Viele Grüße,
Tobias