Beispiel:CSS3 column-rule.html

Aus SELFHTML-Wiki
Wechseln zu: Navigation, Suche

<!DOCTYPE html> <html lang="de"> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <link rel="stylesheet" media="screen" href="./Beispiel:Grundlayout.css" > <title>column-rule</title> <style> .mehrspaltig { 

 column-count: 3;
 column-rule:  dashed;
 gap: 1em;

} .mehrspaltig ul { padding-left: 1em; } .mehrspaltig img { float: left; } .mehrspaltig * { background: gold; } </style> </head> <body>

Verwendung von column-rule

Spaltenlayout

<article class="mehrspaltig">

Allgemeines

<img src="/images/8/87/Selfhtml-logo.gif" alt="selfhtml-logo"> Durch das Spaltenlayout ist es möglich, den Inhalt eines Elementes in mehrere Spalten aufzuteilen.

Im Gegensatz zu Tabellen mit mehreren Spalten, ist dieses Layout flexibel, das heißt z.B. dass...

  • Spaltenumbrüche bei Bedarf erfolgen
  • die Anzahl der Spalten variabel ist

Die Eigenschaften column-... sind nicht dafür gedacht, die Anordnung von Elementen auf einer Seite wie z.B. Kopf, Navigation und Inhalt festzulegen.

Dies erreichen Sie mit <a href="https://wiki.selfhtml.org/wiki/flex">Flexbox</a> oder dem neuen <a href="https://wiki.selfhtml.org/wiki/grid">Grid Layout</a>.

</article>

</body> </html>

Abgerufen am 29.09.2025
von "http://wiki.selfhtml.org/wiki/Beispiel:CSS3_column-rule.html"