JavaScriptを使わずにCSSで異なる親の子を同じ高さに揃えるにはどうすればよいですか?

CSS: 異なる親の子を同じ高さに揃える

CSS を使用する場合、異なる要素の子を同じ高さに揃えることができます。 JavaScriptを使用せずに同じ高さになります。これは、コンテナ内の要素のレイアウトと配置を制御できるフレックスボックスを使用して実現できます。

この配置を実現するには、次の手順に従います。

1. Makeコンテナをフレックスボックスにします: 子を含むコンテナに表示: フレックスを設定します。
2. 子をフレックスボックスにラップします: 子を含む要素に表示: フレックスを設定します、または子自体に。
3. フレックス方向を設定します: flex-direction: 列を使用して、子が垂直方向に流れるようにします。
4. 高さを均等化: 各子要素に align-self: ストレッチを設定して、高さを等しくします。

提供されたコード例では:

<code class="css">.container {
  display: flex;
}

.content {
  display: flex;
  flex-direction: column;
}

.content > * {
  align-self: stretch;
}</code>

このアプローチは、次の要件を満たします。 Bootstrap のモバイル最適化を考慮しながら、同じ高さの異なる列にまたがる子。メディア クエリは、必要に応じてさまざまなブレークポイントに対応するように調整できます。

以上がJavaScriptを使わずにCSSで異なる親の子を同じ高さに揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。