CSS3 を使用して列を動的に調整するレスポンシブなリスト レイアウトを作成するにはどうすればよいですか?

CSS3 を使用してリスト項目を列に表示する

問題点:

レスポンシブ レイアウトの構築リスト項目を垂直方向に表示する必要があり、列数はブラウザーによって決まります。 width.

CSS3 ソリューション:

CSS3 列は、このレイアウトに効率的なソリューションを提供します:

#limheight {
    height: 300px; /* Define the container's height */
    -webkit-column-count: 3;
       -moz-column-count: 3;
            column-count: 3; /* Specify the desired number of columns */
}

#limheight li {
    display: inline-block; /* Ensure each list item is treated as a block element */
}

例:

ブラウザ ウィンドウの幅が十分に広い場合、リスト項目は次のようになります。 3 つの列で表示されます:

1  4  7
2  5  8
3  6  9

ブラウザ ウィンドウが狭くなると、視覚的に魅力的なレイアウトを維持するために列が動的に調整されます。

以上がCSS3 を使用して列を動的に調整するレスポンシブなリスト レイアウトを作成するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。