CSS を使用して長いリストを複数の列に分割するにはどうすればよいですか?

CSS を使用してリストを列に分割する

長くて狭いリストを複数の列に表示すると、Web ページの読みやすさが向上し、過剰なスクロールの必要性が軽減されます。この記事では、このタスクを達成するための CSS テクニックについて説明します。

CSS 複数列ソリューション

CSS 複数列仕様をサポートする最新のブラウザの場合、次のコマンドを使用できます。プロパティ:

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

これにより、リストが自動的に 20 ピクセルの間隔で 4 つの列に分割されます。

IE の JavaScript フォールバック

IE 9 以前は複数列レイアウトをサポートしていないため、JavaScript フォールバックが必要です:

1. Columnizer などの jQuery プラグインを使用する(http://welcome.totheinter.net/columnizer-jquery-plugin/)。
2. float: left を使用し、各リスト項目の適切な幅を計算する手動フォールバック ソリューションを実装します (http: //jsfiddle.net/NJ4Hw/).

追加注

• -moz- および -webkit- プレフィックスは、Firefox および Safari の古いバージョンとの互換性のために使用されます。
• フォールバック ソリューションでは、次の正しい順序が保持されない可能性があります。 IE のリスト項目。
• 異なるブラウザ間での互換性を確保するために、クロスブラウザ テスト ツールの使用を検討してください。ブラウザ。

以上がCSS を使用して長いリストを複数の列に分割するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。