CSS を使用して同じ高さの列を作成するにはどうすればよいですか?

CSS を使用した同じ高さの列

コードでは、テーブル レイアウトを使用して作成しています同じ高さの柱。ただし、各列の幅は列の合計数によって決まるため、この手法はパーセンテージでは機能しません。

Flexbox Solution

同じ高さを実現するには列では、フレックスボックスを使用できます。以下に例を示します。

ul {
  display: flex; /* Makes the list items align horizontally */
  align-items: stretch; /* Stretches the list items to full height */
}

これにより、

内のすべてのリスト項目に対して同じ高さの列が作成されます。

注:

• フレックスボックスは、フレックス コンテナの直接の子でのみ機能します (この場合、< ;ul>).
• フレックス項目に高さを適用すると、同じ高さがオーバーライドされます
• 同じ高さの列は、同じ行の項目にのみ適用されます。

ブラウザのサポート

フレックスボックスは、以下の環境で広くサポートされています。最新のブラウザ（バージョン 10 より前の IE を除く）。互換性を確保するには、古いブラウザにはベンダー プレフィックスを使用することを検討してください。ブラウザ。

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