CSS3 stellt ein neues Verfahren für Arbeiten mit Spalten, die nicht Sie erfordert einen mathematischen Abschluss haben und Testaufbauten mit obskuren Arten durchführen.

Die Spalte Stile bieten die Mittel, um mehrere Spalten auf einer Seite ohne viel Aufwand auf Ihrer Seite erstellen. Abhängig von der spezifischen Art, die Sie verwenden, können Sie verschiedene Layouts erhalten oder einfach eine Zeitung-Typ-Setup erstellen, in dem Inhalt von Spalte zu Spalte fließt basierend auf der Browser Setup des Benutzers.

Wie bei allem CSS3-spezifische, müssen Sie Ihre Anwendung mit den Browsern zu testen, die Ihre Benutzer verwenden möchten. Darüber hinaus ist diese Funktion experimentell angesehen - und Sie haben durch ein paar Reifen zu springen, um es mit einigen Browsern funktioniert.

Während Internet Explorer und Opera die Spalteneigenschaften direkt unterstützt, müssen Sie prepend -moz-, um sie mit Firefox funktioniert und -webkit-, um sie mit Safari und Chrome arbeiten zu lassen. Die folgende Liste gibt einen kurzen Überblick über die Spalteneigenschaften.

• column-count: Gibt die Anzahl der Spalten zu erstellen. Die Breite der Spalten schwankt automatisch, wenn der Benutzer das Browserfenster ändert die Größe (oder der Browser zeigt eine horizontale Scrollbar es möglich zu machen, über mehrere Spalten zu blättern, wenn eine bestimmte Breite und eingestellt ist).

• column-fill: Legt fest, wie der Browser die Spalten füllt (entweder eine Spalte zu einer Zeit, Füllen oder alle Spalten gleichzeitig mit einer gleichmäßigen Menge an Inhalten zu füllen).

• Spalte-Lücke: Erzeugt eine Lücke zwischen den Spalten zu erleichtern, um zu bestimmen, wo eine Spalte endet und eine neue beginnt.

• Spalte-Regel: Erstellt eine Regel zwischen Spalten, so dass der Benutzer ein physikalisches Trennzeichen zu sehen. Diese Eigenschaft besteht aus Farbe, Stil und Breite.

• column-rule-Farbe: Bestimmt mit Farbe der zwischen den Spalten verwendet Regel.

• column-rule-style: Bestimmt den Stil der zwischen den Spalten verwendet Regel.

• column-rule-Breite: Bestimmt die Breite des zwischen den Spalten verwendet Regel.

• Spalte-Spanne: Gibt die Anzahl der Spalten, die ein Objekt umfassen kann.

• Spaltenbreite: Gibt eine Spaltenbreite.

• Spalten: Bietet eine Kurz Verfahren sowohl für die Spaltenanzahl und Spaltenbreite Eigenschaften definieren.

Eine der einfachsten Möglichkeiten, um mit Spalten zu beginnen, ist das Experimentieren einige Inhalte zu erstellen und zu verwenden, dann eine Zeitung Stil Layout, um es zu präsentieren. Das folgende Verfahren hilft Ihnen, eine mehrspaltige Zeitung Layout für einige Dummy-Text erstellen.

1. Erstellen Sie eine neue HTML5-Datei mit einem Texteditor.

2. Geben Sie den folgenden Code für die HTML-Seite.

    
   Erstellen einer Zeitung-Layout
   Lorem ipsum dolor sit amet, consectetueradipiscing elit, sed diam nonummy nibh euismodtincidunt ut laoreet dolore magna aliquam eratvolutpat. Ut wisi enim ad minim veniam, quisnostrud exerci tation ullamcorper suscipitlobortis nisl ut aliquip ex ea commodo consequat.Duis autem vel eum iriure dolor in hendreritin vulputate velit Esse molestie consequat, velillum dolore eu feugiat nulla facilisis bei veroeros et accumsan et iusto odio dignissim quiblandit praesent luptatum zzril delenit augueduis dolore te feugait nulla facilisi. Nam libertempor cum soluta nobis eleifend Option conguenihil imperdiet Doming id quod mazim placeratfacer possim assum. Typi nicht habent claritateminsitam- est usus legentis in iis qui facit eorumclaritatem. Investigationes demonstraveruntlectores legere mich Lius quod ii legunt saepius.

   Alles, was Sie hier haben, ist eine Überschrift und Absatz. Der Absatz enthält den Blindtext für Inhalt in der Zeitung Layout verwendet.

   Wenn Sie sich fragen, was Lorem ipsum dreht sich alles um, können Sie mehr zu lesen Lorem Ipsum. In der Tat bietet die Seite einen Dummy-Text-Generator, der nicht Betrachters Aufmerksamkeit von einem zugrunde liegenden Layout oder andere technische Überlegungen wird ablenken.

3. Speichern Sie die Datei als NewspaperLayout.HTML.

4. Erstellen Sie eine neue CSS-Datei mit einem Texteditor.

5. Geben Sie den folgenden CSS-Style-Informationen.

   #Text {Column-count: 3-Spalten-Regel: 4px Grat Blau-column-Lücke: 20px; -moz-column-count: 3 - moz-column-rule: 4px Grat Blue - moz-column-Lücke: 20px; -webkit-column-count: 3 - webkit-column-rule: 4px Grat Blue - webkit-column-Lücke: 20px;}

   Das Beispiel erstellt einen Stil, der drei Säulen, mit einem blauen Regel zwischen Spalten enthält. Natürlich müssen Sie die Stile dreimal zu wiederholen - einmal für jeden der Browser-Anforderungen.

6. Speichern Sie die Datei als NewspaperLayout.CSS.

7. Legen Sie das NewspaperLayout Beispiel.

   Sie sehen eine Zeitung Stil-Format. Dieses Format wird leichter sein, zu lesen, wenn Sie mit viel Text auf einer Website arbeiten. In der Vergangenheit haben Sie ziemlich hart arbeiten, hatten ein Layout so schön wie diese zu bekommen, aber jetzt alles, was Sie brauchen, ist ein paar einfache Stile.