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

CSS を使用して Web ページのリストを列に分割する

問題:

の読みやすさを向上させるWeb ページを複数に分割して垂直方向にリストするcolumns.

解決策:

推奨される CSS ソリューションは、column-count プロパティを利用します。このプロパティにより、調整可能な間隔でリストを指定した列に分割できます。

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

このコードは、リスト内に 20 ピクセルの間隔で 4 つの列を作成します。

互換性:

ブラウザーによる列数のサポートは、Internet Explorer バージョン 9 と 9 を除き、広く普及しています。

代替案:

Internet Explorer のサポートには、Columnizer for jQuery などの JavaScript ベースのソリューションを使用できます。

フォールバックInternet Explorer:

などの CSS フォールバックを利用します。 float: left、Internet Explorer の列にリスト項目を水平に表示します。

<!--[if lt IE 10]>
<style>
li {
  width: 25%;
  float: left
}
</style>
<![endif]-->

注:

CSS フォールバックは同様の視覚的なレイアウトを維持しますが、リスト項目の順序を乱します。

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