DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
Mit nur wenigen CSS-Regeln können Sie ein von Print inspiriertes Layout erstellen, das die Flexibilität des Webs bietet. Es ist, als würde man eine Zeitung nehmen, aber je kleiner das Papier wird, passen sich die Spalten automatisch an und gleichen sich aus, sodass der Inhalt natürlich fließen kann.
.intro {
columns: 300px 2;
}Die Eigenschaft columns akzeptiert column-count, column-width oder beide Eigenschaften.
columns: || ;Die Verwendung von sowohl column-count als auch column-width wird empfohlen, um ein flexibles Mehrspaltenlayout zu erstellen. column-count fungiert als maximale Anzahl von Spalten, während column-width die Mindestbreite für jede Spalte bestimmt. Durch die Kombination dieser Eigenschaften bricht das Mehrspaltenlayout bei schmalen Browserbreiten automatisch in eine einzelne Spalte zusammen, ohne dass Medienabfragen oder andere Regeln erforderlich sind.
Ein Mehrspaltenlayout funktioniert hervorragend bei Blockelementen, einschließlich Listen, um eine flexible Navigation zu ermöglichen.
Um Ihr Mehrspaltenlayout weiter zu optimieren, verwenden Sie break-inside für bestimmte Elemente, um zu verhindern, dass sie zwischen Spalten stecken bleiben.
Verwandte Eigenschaften
Weitere Informationen
- CSS Multi-column Layout Module Level 1 (Working Draft)
- MDN-Dokumentation
Browser-Unterstützung
| IE | Edge | Firefox | Chrome | Safari | Opera |
|---|---|---|---|---|---|
| 10+ | Alle | 9+ | 50+ | Alle | 11.5+ |
| Android Chrome | Android Firefox | Android Browser | iOS Safari | Opera Mobile |
|---|---|---|---|---|
| Alle | Alle | Alle | Alle | Alle |
Sieht toll aus, haben Sie Beispiele, wo das im Einsatz ist?
Zwar spät dran, aber die neue Codepen Spark-Seite verwendet sie in ihrem Raster, mit großartigen Ergebnissen!
Hallo, ich bin cool.
Danke für diesen hilfreichen Kram, ich mag ihn.
Du bist cool, Mann.
Das ist wirklich nützlich, aber stürzt es sich graceful ab? IE9 scheint zu aktuell, um ignoriert zu werden.
Jacan – IE9 ignoriert die Spalten-Code zumindest halbwegs gracefully und zeigt eine einzelne Spalte an. Ihre Optionen sind, das so zu belassen, einen Modernizer hinzuzufügen oder eine bedingte Stylesheet zu verwenden, um speziell mit 9 und niedriger zu arbeiten.
Danke, Todd.
Ich habe es schließlich in einem meiner Projekte verwendet. Der Effekt ist sehr gut, und es macht mir nichts aus, für diese Seite zu einer einzelnen Spalte zu wechseln. Dennoch ist IE, wie immer, Mist.
Danke, Todd.
Ich habe es schließlich in einem meiner Projekte verwendet. Der Effekt ist sehr gut, und es macht mir nichts aus, für diese Seite zu einer einzelnen Spalte zu wechseln. Dennoch ist IE, wie immer, Mist.
In der Tat. Selbst für IE 10 und 11 hatte ich zuvor `display: table` in der CSS, was verhinderte, dass die Mehrfachspalten auf eine zurückfielen, wenn der Browser skaliert wurde. Ich habe schließlich Medienabfragen hinzugefügt, um die Spaltenanzahl an bestimmten Haltepunkten zurückzusetzen. Ich mochte es wirklich nicht, das tun zu müssen.
Ich wünschte, man könnte Elemente innerhalb von Spalten vertikal ausrichten, mit Code wie `column-margin: auto 0;`.
Danke! Hat wie am Schnürchen funktioniert.
Hallo, ich bin auch einer der Coolen.
Guter Code, ich weiß jetzt alles über die CSS-Regeln für diesen Bereich. Spalten fließen in alle Richtungen, dank meines neu gefundenen Wissens.
Wenn Blut vergossen werden muss, werde ich es gerne in deinem Namen tun, Freund.
Sehr hilfreich, weitermachen!
Ist es möglich, die Spaltenbreite ungleichmäßig zu gestalten? Zum Beispiel, wenn ich `column-count: 3` verwende, möchte ich, dass Spalte 1 eine Breite von 50 % hat und dann 2 und 3 jeweils 25 % Breite. Ist das mit der `column`-Eigenschaft möglich? Oder muss ich Bootstrap verwenden / mein eigenes Grid erstellen?
Oder Sie können einfach Flexbox verwenden.
Cheers
Ich verstehe den Bedarf an dieser Eigenschaft nicht vollständig, wenn Flexbox existiert, außer dass man nicht ganz so viel Code schreiben muss.
d. h.
Brundon, nach allem, was ich gesehen habe, funktioniert das nur, wenn Sie ein bestimmtes Höhenlimit für den Container definieren. Dann erscheinen die Spalten (falls benötigt), aber sie fließen nicht richtig, wenn die Seite kleiner wird ... der äußere Container behält seine Mindestbreite bei, auch wenn er aus dem Bildschirm herausragt.
CSS-Spalten teilen es immer in die definierte Anzahl von Spalten auf und lassen die Höhe vom Inhalt diktieren. Sie fließen sowohl die Breite als auch die Höhe entsprechend neu.
Spaltenausrichtungsproblem in Chrome https://jsfiddle.net/uydovLbx/ funktioniert gut in FF und IE
Super spät dran ... Leicht verwirrt. Flexbox, Grid und Columns. Gibt es Vergleichsartikel?
Hallo Pravin! Sehr gute Frage. Mir fallen auf Anhieb keine Artikel ein, aber hoffentlich kann ich ein bisschen erklären und auf andere Erklärungen verweisen.
CSS-Spalten sind eine visuelle Methode, um Inhalt von einer Spalte zur nächsten fließen zu lassen, bestimmt durch die Anzahl der Spalten, die durch die Eigenschaft
columnsdefiniert sind. Wenn Sie also 3 Spalten auf ein Element anwenden, werden seine Kindelemente auf diese Spalten verteilt.Flexbox kann Spalten erstellen, aber es geht mehr darum, flexible Boxen zu erstellen, die vertikal oder horizontal verlaufen und den verfügbaren Platz basierend auf den Flexbox-Eigenschaften ausfüllen. Ja, es kann wie Spalten (oder Reihen) aussehen, aber es geht wirklich darum, wie Flexbox die Größe jeder flexiblen Box berechnet, um Platz zu füllen.
Grid erstellt echte Spalten und Reihen, indem es Spurlinien festlegt und Elemente darin platziert. Chris hat kürzlich einen guten Vergleich zwischen Grid und Flexbox veröffentlicht ... und die Unterschiede, obwohl etwas nuanciert, werden viel klarer, sobald man sich damit beschäftigt.
Es gibt noch viel mehr als das, wie Sie sich vorstellen können, aber hoffentlich hilft dies zumindest, an der Oberfläche zu kratzen und Sie in die richtige Richtung zu weisen. Könnte sogar einen Beitrag wert sein!
Hallo, ich brauche Rat,
CSS Columns bereitet Chrome- und Safari-Browsern Schwierigkeiten. Folgende Probleme treten auf:
1. Spalten mit einem iframe für eingebettete Videos verschwinden (an das Chrome-Team gemeldet) https://www.codeply.com/p/vVorXVNYX6
2. Die darüber liegende gespannte Spalte erhält eine weitere Spalte mit der Höhe der darunter liegenden gespannten Spalte (https://ibb.co/kq1fWfQ)