Benutzen Sie Ihren Cursor, um diesen Satz auszuwählen. Beachten Sie, wie beim Auswählen des Textes eine Hintergrundfarbe den Bereich füllt? Sie können die Hintergrundfarbe und die Farbe von ausgewähltem Text ändern, indem Sie ::selection stylen. Das Styling dieses Pseudo-Elements ist großartig …
Spalten sind eine großartige Möglichkeit, Inhalte flüssig und ausgewogen darzustellen. Leider fließen nicht alle Elemente anmutig. Manchmal bleiben Elemente zwischen Spalten hängen.
Glücklicherweise können Sie dem Browser mitteilen, dass bestimmte Elemente mit break-inside zusammengehalten werden sollen.
li {
-webkit-column-break-inside: avoid;
Um Spalten zu trennen, können Sie eine vertikale Linie zwischen jeder Spalte hinzufügen. Die Linie befindet sich in der Mitte des Spaltenabstands. Wenn Sie jemals border gestylt haben, dann sind Sie bereit, column-rule zu stylen.
.container {
-webkit-columns: Wenn Sie möchten, dass Ihre Spalten eine bestimmte Breite beibehalten, verwenden Sie column-width.
section {
-webkit-column-width: 200px;
-moz-column-width: 200px;
column-width: 200px;
}Der Browser berechnet, wie viele Spalten mit *mindestens* dieser Breite in den Bereich passen. …
In einem Mehrspaltenlayout können Sie Elemente mit column-span über die Spalten hinweg ausdehnen lassen.
h2 {
-webkit-column-span: all;
column-span: all;
}Weisen Sie einem Element innerhalb des Mehrspaltenlayouts column-span zu, um es zu einem *übergreifenden Element* zu machen. Das …
Wenn Sie einem Mehrspaltenelement eine Höhe hinzufügen, können Sie steuern, wie der Inhalt die Spalten füllt. Der Inhalt kann ausgeglichen oder sequenziell gefüllt werden.
ul {
height: 300px;
-webkit-columns: 3;
-moz-columns: 3;
columns: 3;
-moz-column-fill: balance;
column-fill: balance;
}Wenn Sie eine genaue Anzahl von Spalten bei der Gestaltung eines mehrspaltigen Layouts benötigen, verwenden Sie column-count.
.lead {
column-count: 3;
}Basierend auf der Anzahl der Spalten verteilt der Browser den Inhalt gleichmäßig auf genau diese Anzahl von Spalten.
Dieses …
Mit nur wenigen CSS-Regeln können Sie ein von Print inspiriertes Layout erstellen, das die Flexibilität des Webs bietet. Es ist, als würde man eine Zeitung nehmen, aber wenn das Papier kleiner wird, passen sich die Spalten und balancieren sich automatisch an, sodass der Inhalt …
Mit CSS-Spalten können Sie ein von Print inspiriertes Layout mit wenig zusätzlichem Markup erstellen, das über eine feste Leinwand hinaus adaptiv ist. Ein unterstützter Browser führt Berechnungen durch, um Inhalte in ordentliche Spalten umzubrechen und auszubalancieren. Wenn Sie bereits mit einem …