DigitalOcean bietet Cloud-Produkte für jede Phase Ihrer Reise. Starten Sie mit 200 $ kostenlosem Guthaben!
In einem Mehrspaltlayout können Sie Elemente mit column-span über die Spalten hinweg ausdehnen lassen.
h2 {
-webkit-column-span: all;
column-span: all;
}Weisen Sie einem Element innerhalb des Mehrspaltlayouts column-span zu, um es zu einem span-Element zu machen. Das Mehrspaltlayout wird mit dem nächsten Nicht-Span-Element fortgesetzt.
Der Wert von column-span kann entweder all oder none sein.
Setzen Sie ein Element mit column-span: all, um es über die Spalten spannen zu lassen.
Der Wert none für die Eigenschaft ist der Ausschalter für ein Spanelement. Sie könnten dies bei der Arbeit mit Media Queries verwenden, um dem Spanelement mitzuteilen, dass es nicht mehr spannen soll.
Siehe den Pen column-span example von CSS-Tricks (@css-tricks) auf CodePen.
Verwandte Eigenschaften
Additional Resources
Browser-Unterstützung
Firefox unterstützt dieses column-span nicht, aber es gibt interessante Workarounds.
Hier ist jedoch die Unterstützung für Multi-column Layout im Allgemeinen
Diese Browser-Supportdaten stammen von Caniuse, wo es mehr Details gibt. Eine Zahl bedeutet, dass der Browser die Funktion ab dieser Version unterstützt.
Desktop
| Chrome | Firefox | IE | Edge | Safari |
|---|---|---|---|---|
| 130 | 132 | 10 | 12 | 10 |
Mobil / Tablet
| Android Chrome | Android Firefox | Android | iOS Safari |
|---|---|---|---|
| 127 | 127 | 127 | 10.0-10.2 |
Vergessen Sie nicht Ihre Präfixe!
Ich habe einen wilden Bug in Safari, wenn ich
-webkit-column-span:allmit-webkit-column-break-inside:avoidkombiniere.Schauen Sie sich an, was mit „Module-3“ passiert: http://codepen.io/hand_coding/pen/vEjYyJ
(Hinweis: Seien Sie vorsichtig, dass das Entfernen von
overflow:hiddenaus der Klasse.moduleIhren Browser möglicherweise nicht mehr reagieren lässt)Ich habe diesen Bug auch heute, gibt es 3 Jahre später eine Lösung?
Nein, keine Lösung in Sicht für Safaris seltsames Problem dort. Safari 13.1 Technology Preview zeigt das Problem ebenfalls, und ich kann nur eine einzige weitere Erwähnung des Problems im Web finden.
Funktioniert nicht in Firefox. So schlecht.
Nicht so schlecht, da es ein Safari-Problem ist.
Chrome rendert column-span korrekt, während Safari die Kopfzeile „Module 3“ vor UND nach dem column-span Element rendert.
Ich habe eine Seite, auf der eine h1-Überschrift mit column-span:all; am Anfang eines Textes springt zum Ende darunter bei etwa 1040px Fensterbreite. Ich habe bisher keine Lösung für diesen Bug gefunden.
Entschuldigung, ich habe vergessen zu sagen, in Safari Desktop und iOS.