s-zigan.de

DIGITALE MEDIEN UND MEHR

Column

Allgemeine Anwendung

Mit column steht eine eine sehr konfortable Möglichkeit zur spaltigen Darstellung von Texten zur Verfügung.

.spalten { column-count: 3; /*Anz.Spalten*/ column-width: 200px; /*Mindestweite einer Spalte*/ column-rule: 2px solid red;/*Trennlinie zwischen den Spalten*/ column-gap: 40px; /*Spaltenabstand*/ }

Diese einfachen Eigenschaften werden von den aktuellen Browsern sauber umgesetzt und ermöglichen es längere Texte spaltig darzustellen. Die Darstellung ist durch die Angabe einer Spaltenmindestweite (column-width) automatisch responsiv.

(ie > 9; firefox > 52 ohne prefix; crome > 49 ohne prefix; safari > 8 ohne prefix)

 

Verwendung zur Darstellung von Foto-Rastern

Eine weitere sinnvolle Anwendungsmöglichkeit ergibt sich bei der Darstellung von mehreren Grafiken.

CSS:

* { margin: 0; padding: 0; box-sizing: border-box; } img { max-width: 100%; height: auto; } body { font:16px Arial, sans-serif; } .photos { max-width: 990px; margin: auto; background: #aaa; column-count: 4; column-width: 200px; column-gap: 0; } .photos img { display: block; padding: 1px; }

html:

<section class="photos"> <img src="img/h1.jpg" alt=""> <img src="img/h2.jpg" alt=""> <img src="img/h3.jpg" alt=""> <img src="img/h4.jpg" alt=""> <img src="img/h5.jpg" alt=""> <img src="img/h6.jpg" alt=""> <img src="img/h7.jpg" alt=""> <img src="img/h8.jpg" alt=""> <img src="img/h9.jpg" alt=""> <img src="img/h10.jpg" alt=""> <img src="img/h11.jpg" alt=""> <img src="img/h12.jpg" alt=""> <img src="img/h13.jpg" alt=""> <img src="img/h14.jpg" alt=""> </section>

Die img-Tags können auch durch den Code für Lightbox o.ä. erweitert werden.

Viel Spaß beim testen!

 

Leitet Herunterladen der Datei einBeispiel-Datei