CSS Column – Spaltenumbruch steuern / verhindern

In den letzten Tagen habe ich meine Referenzen Seite über arbeitet, weil mir die Seite speziell auf mobilen Endgeräten nicht gefallen hat. Um die Referenzen schön darzustellen, habe ich mich für ein mehrspaltiges Layout entschieden, und habe dem css3-Standard entsprechend das Multi column-Modul gewählt. Das grundsätzliche Anlegen der Spalten war auch ziemlich einfach: ein paar Zeilen CSScode- fertig.

.multicolumn {
	column-count: 2;
	column-gap: 20px;
        column-width:400px;
	-moz-column-count: 2;
	-moz-column-gap: 45px;
        -moz-column-width:400px;
	-webkit-column-count: 2;
	-webkit-column-gap: 45px;
        -webkit-column-width:400px;
}

Doch bei genauerem Hinsehen fiel mir ein sehr unschöner Sachverhalt auf: Eine Referenz besteht bei mir aus einer H3 – Überschrift, einem Bild und einer unsortierte Liste mit zusätzlichen Informationen. Jetzt passierte es, dass das Bild am ende der ersten Spalte angezeigt wurde, und die dazugehörigen Informationen in die nächste Spalte rutschten. Der Besucher musste deshalb vom Ende der ersten Spalte nach ganz oben zum Anfang der nächsten Spalte scrollen. Das sollte auf keinem Fall passieren. Im Internet fand ich leider keine passende Lösung, um Spaltenumbrüche zu verhindern. Laut css3 Spezifikation sollte man Zeilen- und Spaltenumbrüche eigentlich mit break-before usw. steuern können, allerdings funktionierte das bei mir (Firefox, chrome) nicht. Die einzige für mich akzeptable Lösung besteht darin, die Referenzen jeweils in ein eigenes article-tag einzufügen und diesem die CSS – Eigenschaft

article{
display: inline-block;
}

zu geben. Jetzt werden die Sinneinheiten nicht mehr über mehrere Spalten verteilt – genau was ich wollte.
Nachtrag: über die Eigenschaften:

column-rule-color: #ccc; (farbe, als standard rgb-wert)
column-rule-style:solid; (strichart: z.B. solid, dotted)
column-rule-width: 1px; (strichdicke; der Abstand links und rechts zum Text ist immer gleich)

kann gesteuert werden, wie der Zwischenraum, zwischen den Spalten aussehen soll.

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.

WhatsApp chat

Durch die weitere Nutzung der Seite stimmst du der Verwendung von Cookies zu. Weitere Informationen

Die Cookie-Einstellungen auf dieser Website sind auf "Cookies zulassen" eingestellt, um das beste Surferlebnis zu ermöglichen. Wenn du diese Website ohne Änderung der Cookie-Einstellungen verwendest oder auf "Akzeptieren" klickst, erklärst du sich damit einverstanden.

Schließen