レスポンシブ レイアウトでリスト項目を列に表示するにはどうすればよいですか?

レスポンシブ レイアウトでリスト項目を列として表示する

ブラウザの幅に応じて、リスト項目を垂直方向に表示するという目標は、次を使用して達成できます。 CSS3列。方法は次のとおりです。

HTML を使用して、リスト項目を <div> で囲みます。高さを固定し、column-count プロパティを使用して列数を指定します:

<div>

CSS でコンテナの高さを定義し、各リスト項目がインラインブロックで表示されるようにします:

#limheight {
  height: 800px;
  column-count: 3;
}

#limheight li {
  display: inline-block;
}

ブラウザのサイズが変更されると、CSS3 は自動的に列数を調整し、リスト項目を再配置して表示を最適化します。表示される列の具体的な数は、使用可能な幅とリスト項目自体の幅によって異なります。

この手法を使用すると、リスト項目が列とともに縦一列に表示される応答性の高いレイアウトを実現できます。ブラウザのサイズに基づいて動的に調整します。

以上がレスポンシブ レイアウトでリスト項目を列に表示するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。