CSS 3 Column
Spalten
Text-Spalten für lesenswerte Artikel, wie in einer Zeitschrift. Das Scrollen wird weniger, wenn schmale Spalten nebeneinander angeordnet werden. Die Bildschirme und damit die Zeilen sind bisher einfach zu breit für einen Text, nun muss die Breite nicht mehr durch Werbung oder geblümte Hintergrundbilder künstlich verschmälert werden.
Das Site-Layout hat ein paar schöne neue semantische Tags in HTML 5 erhalten; bitte missbrauche hierfür nicht die CSS 3 column.
Es gibt 2 Möglichkeiten zur Spaltenerzeugung. Entweder es werden die Anzahl Spalten
vorgegeben durch column-count oder es wird die Breite der Spalten
vorgegeben durch column-width.
Für den Abstand zwischen den Spalten gibt es zusätzlich column-gap.
Und schlussendlich vielleicht noch die vertikale Linie column-rule.
In Spalten verwandelt und gleichmässig verteilt wird dabei aller inhalt
eines Div-Containers.
Blockelemente wie Paragrafen (p) bilden weiterhin Absätze aus,
die über die gesamte Seitenbreite laufen. Dies verführt wahrscheinlich zum
Erzeugen eines Zwischenabsatzes mittels doppeltem Zeilenumbruch.
Lorem ipsum dolor sit amet consectetuer Sed velit auctor Aenean sed.
Eleifend lacinia justo tincidunt nec non Vivamus sem tincidunt dolor Curabitur.
Convallis pharetra ut accumsan malesuada magnis faucibus ornare pretium ipsum Vivamus.
Tellus turpis tellus habitant molestie tincidunt mi justo eleifend semper nulla.
Integer In adipiscing fames adipiscing congue lacinia Aliquam lacinia pretium dui.
Vivamus semper magnis odio quam id id eu.
Aliquet sem faucibus libero ut metus tellus tincidunt nibh nisl enim.
Porttitor sapien congue ante neque tincidunt nunc dignissim eget ut turpis.
Mauris justo Aliquam ac Integer Curabitur et odio ut In porttitor.
Sagittis semper auctor vestibulum fringilla nunc in vitae tellus eros auctor.
Ipsum id elit condimentum consequat Morbi nibh feugiat laoreet ac facilisis.
Sed ut nulla non adipiscing Donec habitant sit Vivamus morbi enim.
column
<style type="text/css">
#nr-12 p {
width: 750px;
-moz-column-count: 3; /* mozilla prefix */
-webkit-column-count: 3; /* safari prefix */
-moz-column-gap: 15px; /* mozilla prefix */
-webkit-column-gap: 15px; /* safari prefix */
-moz-column-rule: 1px solid #aea898; /* mozilla prefix */
-webkit-column-rule: 1px solid #aea898; /* safari prefix */
}
</style>
Check den Code.