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.
Kommentare