Mehrspaltiges Layout (magazinartig) mit CSS3 / Web-Design

Im Allgemeinen verlieren Menschen den Überblick, wenn sie extrem lange Inhalte lesen. Aus diesem Grund ist der Inhalt in Printmedien wie Zeitschriften und Zeitungen zur besseren Lesbarkeit in mehrere Spalten unterteilt.

Das Erstellen einer Spalte im Web ist eine völlig andere Geschichte. Das ist ziemlich schwierig. Vor nicht allzu langer Zeit müssen Sie möglicherweise den Inhalt manuell in einige Bereiche unterteilen divs und verschieben Sie es nach rechts oder links und geben Sie dann die Breite, den Abstand, den Rand, die Ränder usw. an.

Die Dinge werden jedoch jetzt mit dem vereinfacht CSS3 Mehrspaltenmodul. Wie der Name schon sagt, können wir mit diesem Modul Inhalte in das Spaltenlayout unterteilen, das wir in Zeitungen oder Magazinen sehen.

Browser-Unterstützung

Derzeit werden in allen Browsern mehrere Spalten unterstützt - Firefox 2+, Chrome 4+, Safari 3.1+ und Opera 11.1 - mit der Ausnahme, dass Internet Explorer vorausgesagt wurde. Die nächste Version, IE10, scheint jedoch dieses Modul zu unterstützen.

Für den Rest der Browser benötigt Firefox immer noch die -moz- Präfix, während Chrome und Safari die -Webkit- Präfix. Opera benötigt keine Präfixe, daher können wir nur die offiziellen Eigenschaften verwenden.

Mehrere Spalten erstellen

Bevor wir die Spalten erstellen, haben wir einige Textabsätze für die Demonstration vorbereitet, die in HTML5 eingeschlossen sind

tag wie folgt;

  Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Nunc libero magna, venenatis quis aliquet ua, rutrum in augue. Donec vel tempor dolor. Donec Volutpat Fringilla Porta. Suspendisse non nulla tortor. Quisque Commodo ornare mi, sitzen Sie am Aliquet justo bibendum non. Ganzzahliges bibendum convallis sapien, sitzen Sie im Orci placerat in. Ganzzahlige Vitae folgen. //und so weiter

… Und legen Sie die Breite für fest 600px aus dem Stylesheet, das war's.

Beginnen wir nun mit dem Erstellen der Spalten.

Im folgenden Beispiel teilen wir den Inhalt in auf zwei spalten mit dem Spaltenanzahl Eigentum. Diese Eigenschaft weist den Browser an, den Inhalt in Spalten um die angegebene Anzahl zu rendern und den Browser die richtige Breite für jede Spalte bestimmen zu lassen.

 Artikel -Webkit-Spaltenanzahl: 2; -Zahlsäulenzahl: 2; Spaltenanzahl: 2;

Spalten können nicht nur durch die Anzahl definiert werden, sondern auch durch Angabe der Breite mit Spaltenbreite Eigenschaft und verlassen Sie den Browser, um zu entscheiden, wie viele Spalten an Ort und Stelle generiert werden sollen.

In diesem Beispiel geben wir die Spaltenbreite für an 150px, Dies führte dazu, dass der Inhalt in drei Spalten unterteilt wurde.

 Artikel -Moz-Spaltenbreite: 150px; -webkit-Spaltenbreite: 150px; Spaltenbreite: 150px;

Wie in der Spezifikation angegeben. Die tatsächliche Breite der Spalte kann je nach verfügbarem Speicherplatz breiter oder schmaler als die angegebene Spaltenbreite sein. Wenn der Wert für width nicht explizit angegeben ist, wird der Wert für “Auto” wird als Standardwert verwendet, was auch bedeuten kann “keine spalte”.

Spaltenabstand

Spaltenabstand Definieren Sie die Leerzeichen, die die einzelnen Spalten voneinander trennen. Der Lückenwert kann in angegeben werden em oder px, aber wie in der Spezifikation angegeben Der Wert kann nicht negativ sein. Im folgenden Beispiel geben wir die Lücke für an 30px, Die Räume zwischen den Säulen sehen also etwas breiter aus.

 Artikel -Webkit-Spaltenlücke: 30px; -Moz-Spaltenlücke: 30px; Spaltenlücke: 30px;

Spaltenregel

Wenn Sie Rahmen zwischen den Spalten hinzufügen möchten, können Sie das verwenden Spaltenregel Eigenschaft, die sehr ähnlich der Rand Eigentum. Sagen wir also, wenn wir einen gepunkteten Rand zwischen die Spalte setzen wollen, können wir schreiben;

 Artikel -Moz-Spaltenregel: 1px gepunktet #ccc; -webkit-Spaltenregel: 1px gepunktet #ccc; Spaltenregel: 1px gepunktet #ccc;

Spalte Span

Diese Eigenschaft funktioniert ähnlich wie die Colspan im Tabelle Etikett. Die übliche Implementierung dieser Eigenschaft besteht darin, die Überschrift des Inhalts über alle Spalten zu verteilen. Hier ist ein Beispiel.

 Artikel h1 -webkit-column-span: all; Spaltenspanne: alle;

Im obigen Beispiel haben wir die definiert h1 über alle Spalten und wenn der Spaltenbereich angegeben ist, 1 wird als Standard verwendet. Leider funktioniert diese Eigenschaft zum Zeitpunkt dieses Schreibens nur in Opera und Chrome.

Letzte Worte

Das ist alles für den Moment. Wir haben alles Notwendige durchlaufen, um mehrere Spalten mit CSS3 zu erstellen. Wie bereits erwähnt, funktioniert dieses Modul in modernen Browsern sehr gut, in Internet Explorer jedoch noch nicht.

Letztendlich hoffen wir, dass Sie jetzt ein ziemlich gutes Verständnis dafür haben, wie man Spalten mit CSS3 erstellt. Wenn Sie Zeit für Experimente haben, können Sie Ihre Methoden und Ergebnisse im Kommentarfeld unten veröffentlichen. Vielen Dank für das Lesen dieses Beitrags und viel Spaß.

Demo
Quelle herunterladen