Von w3schools hatte ich ein responsive Design mit zwei gleich langen Spalten, die sich selbst anpassen. Das zugehörige CSS sieht so aus:
.column-cl {
float: left;
width: 100%;
box-sizing: border-box;
}
.right-cl {
padding-right: 1.2em;
}
.left-cl {
padding-left: 1.2em;
}
/* Clear floats after the columns */
.row-cl:after {
content: "";
display: table;
clear: both;
}
/* Oberhalb von 800px soll zweispaltig dargestellt werden */
@media screen and (min-width: 800px) {
.column-cl {
width: 50%;
}
}Mit den beiden von mir zusätzlich eingeführten Klassen left-cl und right-cl will ich dafür sorgen, dass bei zweispaltiger Darstellung zwischen den beiden Spalten ein Abstand bleibt. Im HTML habe ich also beide Klassen für eine div-Spalte verwendet:
<div class="column-cl right-cl">
und für die zweite Spalte natürlich:
<div class="column-cl left-cl"> Jetzt habe ich mir damit aber das Problem eingehandelt, dass bei einspaltiger Darstellung immer der Text, der sonst die erste Spalte bildet, eine um die Einrückung kürzere Zeilenlänge hat und der Text, der sonst in der zweiten Spalte stehen würde, ist deutlich sichtbar nach rechts eingerückt.
Ich könnte natürlich für beide Spalten ein padding nach links und rechts verwenden. Dann aber ist der Text gegenüber den meistens nicht in Spalten stehenden Überschriften eingerückt. Und zudem würde unnötig Platz verschwendet, wenn der Beitrag auf einem kleinen Display gezeigt wird.
Gibt es in diesem Code-Beispiel eine Möglichkeit, statt zwei eben drei Spalten zu erzeugen, wobei dann die zweite Spalte leer bleiben würde und sehr schmal wäre, um den Abstand zwischen den Spalten eins und drei zu halten. Spalten 1 und 3 würden wie bisher den Text beinhalten.
Da die mittlere (Abstandshalter-)Spalte inhaltsleer bleibt, würde sie automatisch auf Null zusammen fallen, wenn der Text aufgrund der @media-Regel wieder einspaltig gezeigt werden soll.
So weit meine Überlegungen. Vielleicht gibt es noch einfachere Lösungen?
Jedenfalls reicht mein CSS-KnowHow nicht aus, hier eine Lösung zu finden und so würde ich mich über Lösungs-Ideen freuen.