Spaltenumbruch und Bindung von Überschrift und Paragraph

[MrMurphy1]

Hallo

Ich gehe mal davon aus, dass du mit deiner Frage Multicolumn meinst, obwohl du es mit keinem Wort erwähnst.

Gibt es eine schlaue Lösung?

Wenn du damit eine Lösung meinst die browserübergreifend funktioniert - ja.

Allerdings muss das CSS den Eigenheiten von Multicolumn angepasst werden.

Obere Bündigkeit der Spalten, wenn mit einer Überschrift begonnen wird.

Offensichtlich hat multicolumn etwas eigenartige Ansichten wie es mit den Collapsing Margins umgehen soll.

Als einfachste Lösung habe ich für mich herausgefunden, allen Blockelementen (zu denen auch die Überschriften gehören) einen margin-top von 0 zu geben und die gewollten Abstände über margin-bottom festzulegen.

Da es sich in der Regel nur um einige wenige Elemente handelt, kannst du dafür einmal die CSS-Anweisungen einrichten und dann für Multicolumn immer wieder verwenden.

Zusammenhalten von Überschrift und nachfolgendem Paragraph (oder Liste|Bild)

Das funktioniert browserübergreifend über die Anweisung display: inline-block.

Wenn zum Beispiel einzelne Absätze (p-Elemente) nicht auf zwei Spalten verteilt werden sollen kann ihnen die Anweisung direkt zugewiesen werden. Auf meiner Testseite zum Beispiel die einzelnen Ali-Sprüche, die sich jeweils in einem Absatz befinden.

Wenn, wie in deinem Fall, eine Überschrift und der nachfolgende Absatz immer in einer Spalte stehen sollen, können die mit einem div umgeben werden, dem dann inline-block zugewiesen wird.

Bei ul-Listen kann dem ul-Element inline-block zugewiesen werden. Oder dem figure-Element um img und figcaption zusammenzuhalten. Und so weiter.

Ich stelle mal zum direkten Ausprobieren, auch in verschiedenen Browsern und Geräten, meine Multicolumn-Testseite temporär zur Verfügung:

Multicolumn-Testseite (temporär)

Die orangenen Ränder dienen nur der optischen Verdeutlichung von Informationen, die nicht auf mehrere Spalten verteilt werden sollen und entfallen in der Praxis.

Falls die Ränder doch in der Praxis angezeigt werden sollen, sollten die oberen und unteren Abstände noch etwas angepasst werden.

In dem Flaggen-Text kann auch schön nachvollzogen werden, dass Fließtext und Blockelemente im Multicolumn-Container auf einer Höhe beginnen.

Gruss

MrMurphy