Das CSS Multi-Column Layout-Modul ist ein leistungsstarkes Tool, mit dem Sie ganz einfach mehrspaltige Layouts für Ihre Webseiten erstellen können. Der Aufstieg von Responsive Design bedeutet, dass es wichtig ist, zu verstehen, wie man dieses Modul verwendet.

Sie können Spalteneigenschaften verwenden, um flexible und dynamische Layouts zu erstellen, die sich an unterschiedliche Bildschirmgrößen anpassen.

Angabe von Spaltennummer, Breite und Abstand

Um ein geeignetes mehrspaltiges Layout für Ihren Seiteninhalt zu erstellen, sollten Sie zunächst entscheiden, wie viele Spalten es umfassen soll. Eine der wichtigsten Eigenschaften im Multi-Column-Modul ist die Spaltenanzahl -Eigenschaft, mit der Sie die Anzahl der Spalten festlegen, in die der Inhalt unterteilt werden soll.

Zum Beispiel:

.Container {
Spaltenanzahl: 3;
}

Sie können auch die Breite und den Abstand der Spalten angeben. Sie können den Wert für die Spaltenbreite mit einem von festlegen die unterstützten CSS-Einheiten wie px, em, oder %.

instagram viewer

Wenn Spaltenbreite ist eingestellt auf Auto, berechnet der Browser die Breite jeder Spalte basierend auf dem Spaltenanzahl Eigenschaft und den verfügbaren Platz in Ihrem Layout.

Zum Beispiel deklariert dieses CSS 3 Spalten mit einer Breite von jeweils 200 Pixel:

.Container {
Spaltenanzahl: 3;
Spaltenbreite: 200px;
}

Der Spaltenlücke -Eigenschaft gibt die Lücke oder den Abstand zwischen den Spalten in einem mehrspaltigen Layout an. Es legt die Größe der leeren Leerzeichen zwischen benachbarten Spalten fest und kann einen Längenwert in Pixel, Ems oder anderen unterstützten Einheiten annehmen.

Zum Beispiel:

.Container {
Spaltenanzahl: 3;
Spaltenlücke: 20px; /* setzt den Abstand zwischen den Spalten auf 20 Pixel */
}

Standardmäßig ist der Wert von Spaltenlücke ist eingestellt auf normal. Ihr Browser wählt diesen Wert, um konsistente Abstände zwischen den Spalten in Ihrem Layout zu erzielen und gleichzeitig optisch ansprechend zu bleiben. Dieser Wert kann auch zwischen Browsern variieren und kann auch von der Schriftgröße, Zeilenhöhe, Eigenschaft positionieren, und andere Layouteigenschaften des Inhalts der Spalten.

Stellen Sie sicher, dass die Spalten ausgeglichen sind

CSS-Spalten versuchen, den gesamten verfügbaren Platz innerhalb eines Layouts auszufüllen. Dies kann manchmal zu Spalten mit deutlich unterschiedlichen Höhen führen, wodurch das Layout ungleichmäßig aussieht.

Um Spalten auszugleichen, sollten Sie darauf achten, dass jede Spalte in Ihrem Layout ungefähr die gleiche Menge an Inhalt hat.

Sie können dies erreichen, indem Sie das CSS festlegen Spaltenfüllung Eigentum zu Gleichgewicht. Ein Browser versucht dann, den Inhalt gleichmäßig auf alle Spalten zu verteilen, sodass sie ungefähr die gleiche Höhe haben.

Der Spaltenfüllung Eigenschaft eingestellt ist Gleichgewicht standardmäßig, aber ein Wert von Auto wird dieses Verhalten ändern. Die Verwendung von auto verteilt den Inhalt basierend auf dem verfügbaren Platz auf Spalten. Dies kann zu ungleichmäßigen Abständen zwischen Säulen und ungleichmäßigen Säulenhöhen führen. Es kann sogar ein Layout mit leeren Spalten erzeugen.

Hier ist ein Beispiel für die Verwendung von Spaltenfüllung Eigenschaft zum Ausgleichen von Spalten in einem mehrspaltigen Layout:

.mehrspaltiges Layout {
Spaltenanzahl: 3;
Spaltenlücke: 20px;
Spaltenfüllung: Gleichgewicht;
}

In diesem Beispiel haben wir ein mehrspaltiges Layout mit drei Spalten und einem Abstand von 20 Pixeln zwischen jeder Spalte. Durch die Einstellung der Spaltenfüllung Eigentum zu Gleichgewichtstellen wir sicher, dass sich der Inhalt gleichmäßig über die Spalten verteilt, was zu ausgewogenen Spaltenhöhen führt.

Es ist wichtig zu beachten, dass die Spaltenfüllung -Eigenschaft funktioniert möglicherweise nicht für alle Layouts gut und kann zu ungleichmäßigen Abständen zwischen den Spalten führen. In solchen Fällen müssen Sie möglicherweise JavaScript verwenden, um die Spalten manuell auszugleichen. Denken Sie daran, Best Practices zu befolgen und Verwenden Sie progressive Erweiterung damit Sie nicht auf JavaScript angewiesen sind.

Alles zusammenfügen

Sie können alles zusammenführen, was Sie über die Implementierung eines Layouts mit CSS-Spalten gelernt haben, und es verwenden, um ein Layout im Magazinstil zu erstellen.

Erstellen Sie zunächst die grundlegende HTML-Struktur. Verwenden Sie ein Containerelement, um Ihren Inhalt einzuschließen, und erstellen Sie dann mehrere untergeordnete Elemente, die Sie dann in Spalten anordnen können.

html>
<html>
<Kopf>
<Verknüpfungrel="Stilvorlage"href="CSScolumns.css" />
Kopf>
<Körper>
 Container-Element 
<divKlasse="Magazin-Layout">
 Untergeordnete Elemente 
<divKlasse="Artikel">
<h2>Artikelüberschrifth2>


<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ein
 magna vel lorem pharetra bibendum.P>
div>


<divKlasse="Artikel">
<h2>Artikelüberschrifth2>


<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ein
 magna vel lorem pharetra bibendum.P>
div>


<divKlasse="Artikel">
<h2>Artikelüberschrifth2>


<P>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ein
 magna vel lorem pharetra bibendum.P>
div>
div>
Körper>
html>

Um mit dem CSS Multi-Column-Modul ein Layout im Zeitschriftenstil zu erstellen, kombinieren Sie die Spaltenanzahl, Spaltenbreite, Spaltenlücke, Und Spaltenfüllung Eigenschaften:

.Magazin-Layout {
Spaltenanzahl: 3;
Spaltenbreite: 300px;
Spaltenlücke: 20px;
Spaltenfüllung: Gleichgewicht;
}
.Artikel {
Hintergrundfarbe: #f8f8f8;
Grenzradius: 4px;
Box Schatten: 0 2px 4pxRGB(0, 0, 0, 0.1);
Polsterung: 10px;
Einbruch: Spalte vermeiden;
}

Dieses Beispiel definiert auch die Einbruch Eigentum auf der .Artikel Klasse mit einem Wert von Spalte vermeiden. Die Eigenschaft stellt sicher, dass jeder Artikel in einer einzelnen Spalte bleibt, anstatt sich auf mehrere Spalten aufzuteilen. So sollte das Layout aussehen:

Verwenden von Fallbacks für nicht unterstützte Browser

Es ist wichtig zu beachten, dass die Spaltenanzahl -Eigenschaft wird nicht in allen Browsern unterstützt. Browser, die das nicht unterstützen Spaltenanzahl, zeigt den Inhalt stattdessen in einer einzelnen Spalte an.

Um Fallback-Stile für nicht unterstützte Browser bereitzustellen, können Sie Funktionsabfragen wie verwenden @unterstützt Unterstützung für die zu erkennen Spaltenanzahl -Eigenschaft und bieten alternative Stile, wenn die Eigenschaft nicht unterstützt wird.

Zum Beispiel:

.Container {
/* Fallback für Browser, die Spaltenzählung nicht unterstützen */
Breite: 100%;
}
/* Unterstützung für Spaltenanzahl erkennen */
@unterstützt (Spaltenanzahl:3) {
.Container {
Spaltenanzahl: 3;
 }
}

In diesem Beispiel verwenden wir die @unterstützt Funktionsabfrage, um Unterstützung für die zu erkennen Spaltenanzahl Eigentum. Wenn der Browser die Spaltenanzahl unterstützt, wird die Container Element wird in drei Spalten angezeigt. Wenn der Browser keine Spaltenzählung unterstützt, zeigt er den Inhalt in einer einzelnen Spalte mit dem an Breite Eigentum.

Inhalte in Spalten aufteilen

Insgesamt bieten CSS-Spalten eine praktische und leistungsstarke Möglichkeit, flexible und ansprechende mehrspaltige Layouts zu erstellen, die die Benutzerfreundlichkeit und Benutzererfahrung von Webinhalten verbessern.

Durch die gemeinsame Verwendung von CSS-Spalten und JavaScript können Sie noch ausgefeiltere und dynamischere Layouts erstellen, die sich anpassen an unterschiedliche Benutzerpräferenzen und Gerätegrößen anzupassen, wodurch Ihre Webinhalte für Ihre Benutzer zugänglicher und ansprechender werden.