Wie kann ich lange Listen mithilfe von CSS in mehrere Spalten aufteilen?

Listen mit CSS in Spalten aufteilen

Die Darstellung langer, schmaler Listen in mehreren Spalten kann die Lesbarkeit von Webseiten verbessern und die Notwendigkeit übermäßigen Scrollens verringern. In diesem Artikel werden CSS-Techniken zur Bewältigung dieser Aufgabe untersucht.

CSS-Mehrspaltenlösung

Für moderne Browser, die die CSS-Mehrspaltenspezifikation unterstützen, können Sie Folgendes verwenden Eigenschaften:

ul {
    column-count: 4;
    column-gap: 20px;
}

Dadurch wird die Liste automatisch in vier Spalten mit einem Abstand von 20 Pixel dazwischen unterteilt sie.

JavaScript-Fallback für IE

IE 9 und älter unterstützen keine mehrspaltigen Layouts, daher ist ein JavaScript-Fallback erforderlich:

1. Verwenden Sie ein jQuery-Plugin wie Columnizer (http://welcome.totheinter.net/columnizer-jquery-plugin/).
2. Implementieren Sie eine manuelle Fallback-Lösung, die float: left verwendet und die richtige Breite für jedes Listenelement berechnet (wie in http: //jsfiddle.net/NJ4Hw/).

Zusätzlich Hinweise

• Die Präfixe -moz- und -webkit- werden aus Kompatibilitätsgründen mit älteren Versionen von Firefox und Safari verwendet.
• Die Fallback-Lösung behält möglicherweise nicht die richtige Reihenfolge bei Listen Sie Elemente im IE auf.
• Erwägen Sie die Verwendung eines browserübergreifenden Testtools, um die Kompatibilität zwischen verschiedenen Browsern sicherzustellen.

Das obige ist der detaillierte Inhalt vonWie kann ich lange Listen mithilfe von CSS in mehrere Spalten aufteilen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!