Ein CSS-Multi-Säulen-Layout-Tutorial für Anfänger

Einführung in das CSS-Multi-Säulen-Layout-Tutorial: Schlüsselpunkte

• Mit dem CSS-Multi-Säulen-Layout-Modul können Entwickler reaktionsschnelle Multi-Säulen-Layouts erstellen, die auf verschiedenen Bildschirmgrößen gute Ergebnisse erzielen können. Das Attribut column-count gibt die Anzahl der Spalten an, und das Attribut column-width gibt die Breite jeder Spalte an. Beide können auf auto oder positive Zahlen eingestellt werden und können mit dem Attribut "Abkürzung columns) gleichzeitig festgelegt werden.
Das Attribut
• column-gap Gibt den Spaltenabstand an, und das Attribut column-rule ist abgekürzt, sodass wir Teiler zwischen den Spalten hinzufügen können. Das Attribut column-fill bestimmt, wie der Inhalt zum Ausfüllen von Spalten zugewiesen wird, und das Attribut column-span steuert, wie Elemente mehrere Spalten umfassen.
• , damit das Layout in allen Bildschirmgrößen gut angezeigt werden kann, sollten sowohl column-count als auch column-width angegeben werden. Die Verwendung von Medienabfragen kann dazu beitragen, Probleme wie horizontales Scrollen oder übermäßige Säulenlängen zu lösen. Legacy-Browser, die keine Multi-Säulen-Funktionen unterstützen, werden elegant auf Einspaltlayouts herabgestuft.

lange Textzeilen können mühsamer zu lesen sein, und die Leser achten eher den nicht-missigen Zeilen als dem Textinhalt selbst. Dieses Problem kann mit einem Multi-Säulen-Layout leicht gelöst werden. Multi-Säulen-Layouts sind in Druckmedien sehr häufig. Die Funktionalität des CSS-Multi-Säulen-Layout-Moduls ermöglicht es uns, denselben Multi-Säulen-Effekt auf der Website zu reproduzieren.

Eine der Schwierigkeiten bei der Verwendung von Multi-Säulen-Layouts im Webdesign ist die Unfähigkeit, die Dokumentgröße zu steuern. In diesem Tutorial werde ich Ihnen beibringen, wie Sie ein reaktionsschnelles Mehr-Säulen-Layout erstellen, das in einer Vielzahl von Bildschirmgrößen gut abschneidet. Wir werden mit den Grundlagen beginnen und dann nach und nach komplexere Konzepte lernen.

Browser -Unterstützung

Wenn Sie bereit sind, Präfixe zu verwenden, ist die Browser-Unterstützung für Multi-Säulen-Layouts sehr gut. Laut Statistiken der Can I nutzen -Website wird diese Funktion in 95,32% der Browser weltweit unterstützt. Einige Browser (wie IE10, Edge und Opera mini) unterstützen mehrfache Layouts. Andere Browser wie Firefox und Chrom benötigen ein Präfix.

Wenn Sie ältere Browser unterstützen müssen (normalerweise IE9 und unten), können Sie die alte Polyfill verwenden. Wenn der Browser die Multi-Säulen-Funktion nicht unterstützt, wird das Layout natürlich elegant auf ein einspaltiges Layout herabgestuft. In diesem Fall ist Polyfill möglicherweise nicht die beste Option.

Das CSS-Multi-Säulen-Layout-Modul hat viele verschiedene Eigenschaften. In den folgenden Abschnitten werde ich sie einzeln vorstellen.

Anzahl der Spalten und Spaltenbreite

Das Attribut

column-count Gibt die Anzahl der für das Element festgelegten Spalten an. Sie können es auf auto oder eine positive Zahl einstellen. Wenn auf auto eingestellt ist, wird die Anzahl der Spalten durch das Attribut column-width bestimmt. Wenn auf eine positive Zahl eingestellt ist, haben alle Spalten gleiche Breiten.

Das Attribut

column-width Gibt die Breite jeder Spalte des Elements an. Dies wird nicht streng verfolgt. Wenn beispielsweise nicht genügend Platz vorhanden ist, kann die Spalte enger sein. Diese Eigenschaft kann auch auf einen auto -Wer- oder eine positive Zahl eingestellt werden. Wenn auf auto eingestellt wird, wird die Breite durch das Attribut column-count bestimmt. Der freie Speicherplatz ist gleichmäßig über alle Spalten verteilt.

Alternativ können Sie beide Werte gleichzeitig mit dem Attribut Abkürzung columns festlegen. Die Syntax des Attributs columns lautet wie folgt:

<code class="language-css">.example {
  columns:  || 
}</code>

Einige Verwendungsbeispiele dieser Eigenschaft sind unten zusammen mit Erklärungen neben jedem Beispiel gezeigt:

<code class="language-css">.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}</code>

Wie Sie sehen, ist die erste columns Definition die Abkürzung des vierten und die zweite die Abkürzung des dritten. Wenn eine Ganzzahl keine Einheiten zuweist, wird er an column-count analysiert.

Dies ist eine Codepen -Demonstration, um die bisher diskutierten Merkmale zu demonstrieren

Wenn Sie das Fenster ändern, werden Sie Folgendes bemerken:

Die Eigenschaft
• column-count macht immer die Anzahl der Spalten dem von Ihnen angegebenen Wert entspricht. Das einzige, was sich ändert, ist die Breite der Spalte.
Das Attribut
• column-width ändert automatisch die Anzahl der Spalten basierend auf dem verfügbaren Speicherplatz. Die Anzahl der Spalten wird eingestellt, indem die Säulenbreite größer als der angegebene Wert ist. Es kann auch die Breite aller Spalten an einen kleineren Wert anpassen, wenn ein unzureichender freier Speicherplatz besteht.
Das Attribut
• columns verwendet den Wert column-count als Grenze für die maximale Anzahl der zulässigen Spalten. Es passt die Breite so an, dass column-count die Zählgrenze niemals überschreiten wird, und column-width liegt ebenfalls sehr nahe an der angegebenen Breite.

Spaltenabstand und Spaltenregeln

Das Attribut

column-gap ermöglicht es uns, den Speicherplatz zwischen den Spalten anzugeben. Sie können es auf normal oder Längenwert einstellen. Es kann Null sein, aber nicht negativ. Wenn Sie es auf normal festlegen, verwendet es den Standardabstand zwischen den vom Browser definierten Spalten.

Das

column-rule Attribut ist eine Abkürzung, die es uns ermöglicht, Teiler zwischen den Spalten hinzuzufügen. Dies ähnelt der Verwendung der Attribute border-left oder border-right. Diese Eigenschaft folgt der folgenden Syntax:

<code class="language-css">.example {
  column-rule:  ||  || 
}</code>

für column-rule-width können Sie die Breite als Länge angeben (z. B. 3px) oder Schlüsselwörter verwenden (z. B. thin, medium oder thick). column-rule-style Akzeptieren Sie Werte wie dashed, dotted, solid. Sie können alle gültigen Werte des border-style -attributs mit column-rule-style verwenden, was jeder gültige Farbwert sein kann. column-rule-color

Dies ist eine Codefen -Demonstration, bei der diese Eigenschaften zusammen verwendet werden

Spaltenfüllung und Spaltespanne Das Attribut

bestimmt, wie Inhalte zum Ausfüllen der Spalten zugewiesen werden. Diese Eigenschaft kann auf column-fill oder auto eingestellt werden. Wenn auf balance eingestellt ist, sind die Spalten in der Reihenfolge besiedelt. Verwenden Sie auto, um sicherzustellen, dass der Inhalt gleichmäßig auf alle Spalten verteilt ist. balance

Es ist wichtig zu beachten, dass Firefox den Inhalt automatisch ausgleichen, wenn Sie eine feste Höhe für Spaltenelemente festlegen. Andere Browser werden jedoch in der Reihenfolge der Spalten in Ordnung gebracht.

column-span Attribute steuern, wie Elemente mehrere Spalten umfassen. Es hat zwei mögliche Werte: all oder none. Beim Einstellen auf all umfasst das Element alle Spalten. Diese Eigenschaft wird in Firefox nicht unterstützt.

Dies ist eine Codepen -Demonstration, die ein Blockquote -Element über alle Spalten "überspannt"

In Firefox endet Blockquote in der mittleren Säule, was ein akzeptabler Fallback sein kann.

Erstellen Sie Responsive Layouts mit mehreren Spalten

Jetzt, da Sie die verschiedenen Eigenschaften und möglichen Werte kennengelernt haben, konzentrieren wir uns darauf, wie das Layout reaktionsschnell und benutzerfreundlich bleibt.

column-count und column-width haben ihre eigenen Probleme. Obwohl column-count die Anzahl der Spalten auf größeren Geräten steuern kann, werden das Layout auf kleineren Geräten unterbrochen. In ähnlicher Weise stellt column-width sicher, dass die Spalten auf kleineren Geräten nicht zu eng sind, aber zu vielen Spalten auf größeren Geräten führen.

Um sicherzustellen, dass Ihr Layout in allen Bildschirmgrößen gut angezeigt wird, sollten Sie sowohl column-count als auch column-width angeben. Auf diese Weise können Sie die Breite und Anzahl der Spalten steuern. Möglicherweise müssen Sie jedoch noch einige Probleme beheben, die wir als nächstes besprechen werden.

Horizontale Scrolling

reparieren

Wenn Sie eine feste Höhe für die Spalte angeben, wird das Schrumpfen des Ansichtsfensters eine horizontale Bildlaufleiste angezeigt. Da der Inhalt nicht vertikal erweitert werden kann, wird er horizontal wachsen. Um dieses Problem zu lösen, können Sie Ihren Browser ändern, um zu sehen, wie weit die horizontale Scrollbar zum ersten Mal angezeigt wird. Sie können dann eine Medienabfrage verwenden, um die Höhe der Spalte unter dieser Breite auf auto festzulegen. Hier ist der Code, um dies zu tun:

<code class="language-css">.example {
  columns:  || 
}</code>

Diese Codepen -Demonstration zeigt das Problem und mögliche Lösungen

Die Größe des Fensters ändern, um zu sehen, wie beide Beispiele reagieren.

zu lange Spalte

behoben

Wenn Ihre Spalte zu lang ist, müssen Benutzer weiter nach oben und unten scrollen, um alles zu lesen, was ärgerlich sein kann. Wenn die Höhe der Spalte größer ist als die Höhe der Ansichtsfenster selbst, entfernen Sie am besten mehrere Spalten. Dies kann erneut mit Medienabfrage erfolgen:

<code class="language-css">.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}</code>

In diesem Fall verwende ich nur mehrere Spalten, wenn die Ansichtsfensterbreite dem Benutzer nicht mehr auf und ab scrollen muss.

Demo mit mehreren Spalten und Medienabfragen

anzeigen

Schlussfolgerung

Ich hoffe, dieses Einführungs-Tutorial für CSS-Multi-Säulen-Layout-Module wird Sie mit dieser Funktion vertraut machen. Diese Eigenschaften können Ihrer Responsive Design Toolbox gut hinzugefügt werden. Wenn Sie immer noch ältere Browser unterstützen müssen, werden mehrere Spalten häufig elegant auf einzelne Spalten herabgestuft.

FAQ für CSS Multi-Säulen-Layout

Wie erstelle ich ein Multi-Säulen-Layout in CSS?

column-count Es ist sehr einfach, Multi-Säulen-Layouts in CSS zu erstellen. Sie können die Eigenschaft

verwenden, um die Anzahl der gewünschten Spalten im Layout anzugeben. Wenn Sie beispielsweise drei Spalten möchten, können Sie schreiben:

<code class="language-css">.example {
  columns:  || 
}</code>

In diesem Beispiel ist .container die Klasse der Elemente, die Sie in Spalten teilen möchten. Das Attribut column-count unterteilt den Inhalt des Elements automatisch in die angegebene Anzahl von Spalten.

Wie kann man den Abstand zwischen den Spalten in CSS steuern?

Mit der Eigenschaft

column-gap ermöglicht es Ihnen, den Speicherplatz zwischen den Spalten zu steuern. Der Wert, den Sie für diese Eigenschaft festgelegt haben, ist die Breite der Lücke. Wenn Sie beispielsweise einen 20px -Lücken zwischen den Spalten möchten, können Sie schreiben:

<code class="language-css">.example {
  columns: 10em;      /* column-width: 10em / column-count: auto */
  columns: 4;         /* column-width: auto / column-count: 4 */
  columns: 4 auto;    /* column-width: auto / column-count: 4 */
  columns: auto 10em; /* column-count: auto / column-width: 4 */
  columns: auto;      /* column-count: auto / column-width: auto */
  columns: auto auto; /* column-count: auto / column-width: auto */
}</code>

Kann ich Spalten unterschiedlicher Breiten in CSS erstellen?

Leider unterstützt das CSS-Multi-Säulen-Layout-Modul keine Spalten unterschiedlicher Breiten. Alle mit dem column-count -attribut erstellten Spalten haben die gleiche Breite. Sie können jedoch andere CSS -Techniken wie Flexbox oder Grid verwenden, um Spalten unterschiedlicher Breiten zu erstellen.

Wie kann man die Spaltenbreite in CSS steuern?

Sie können das Attribut column-width verwenden, um die Spaltenbreite zu steuern. Diese Eigenschaft gibt die optimale Breite der Spalte an, der Browser passt jedoch die Breite an, um den Inhalt anzupassen. Um beispielsweise die Spaltenbreite auf 200px einzustellen, können Sie schreiben:

<code class="language-css">.example {
  column-rule:  ||  || 
}</code>

Wie erstelle ich Spaltenregeln in CSS?

Mit der Eigenschaft

column-rule können Sie Regeln oder Zeilen zwischen den Spalten erstellen. Sie können die Breite, den Stil und die Farbe der Regel angeben. Um beispielsweise eine 1PX -solide schwarze Regel zu erstellen, können Sie schreiben:

<code class="language-css">.responsive-height {
  height: 250px;
}

@media (max-width: 1040px) {
  .responsive-height {
    height: auto;
  }
}</code>

Wie kann man Spalte -Interrupts in CSS kontrollieren?

Mit der Eigenschaft

break-inside können Sie die Spalte Interrupts steuern. Sie können diese Eigenschaft auf avoid festlegen, um Interrupts innerhalb des Elements zu verhindern. Zum Beispiel:

<code class="language-css">@media (min-width: 800px) {
  .long-columns {
    columns: 3 200px;
  }
}</code>

Kann ich Multi-Säulen-Layouts mit reaktionsschnellem Design verwenden?

Ja, Sie können Multi-Säulen-Layouts mit reaktionsschnellen Designs verwenden. Sie können Medienabfragen verwenden, um die Anzahl der Spalten basierend auf der Ansichtsfensterbreite anzupassen. Zum Beispiel möchten Sie möglicherweise eine Spalte auf einem kleinen Bildschirm und drei Spalten auf einem großen Bildschirm anzeigen.

Wie kann man Spalten in CSS bevölkern?

standardmäßig sind Spalten in der Reihenfolge besiedelt. Dies bedeutet, zuerst die erste Spalte, dann die zweite Spalte usw. auszufüllen. Sie können dieses Verhalten jedoch mit dem column-fill -attribut ändern. Wenn Sie diese Eigenschaft auf balance festlegen, versucht der Browser, die Spalte gleichmäßig zu füllen.

Wie kann man Säulen überqueren?

Das Attribut

column-span ermöglicht es Elementen, mehrere Spalten zu überspannen. Sie können diese Eigenschaft auf all festlegen, um das Element über alle Spalten zu erstatten. Zum Beispiel:

<code class="language-css">.container {
  column-count: 3;
}</code>

Gibt es ein Browser-Kompatibilitätsproblem mit dem CSS-Multi-Säulen-Layout?

Die meisten modernen Browser unterstützen das CSS-Multi-Säulen-Layout, aber es kann einige Unterschiede in der Implementierung geben. Es ist am besten, Ihr Layout in einem anderen Browser zu testen, um sicherzustellen, dass es wie erwartet funktioniert. Sie können auch Tools verwenden, z. B. kann ich verwenden, um die Browserunterstützung auf verschiedene CSS -Eigenschaften zu überprüfen.

Das obige ist der detaillierte Inhalt vonEin CSS-Multi-Säulen-Layout-Tutorial für Anfänger. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!