ホームページ > ウェブフロントエンド > CSSチュートリアル > 複数列レイアウトの子 Div の高さを揃えるにはどうすればよいですか?

複数列レイアウトの子 Div の高さを揃えるにはどうすればよいですか?

DDD
リリース: 2024-12-20 00:22:10
オリジナル
291 人が閲覧しました

How Can I Make Child Divs in a Multi-Column Layout Have Equal Heights?

複数列レイアウトでの動的高さ管理

子要素全体で均一な高さを強制することは、特に親コンテナの高さの場合に困難になる可能性がありますは不特定です。この記事では、高さが指定されていない親 div 内の子 div の高さを 100% にする方法について説明します。

次の HTML 構造を考えてみましょう。

<div>
ログイン後にコピー

目的は、「ナビゲーション」を作成することです。 div の高さは、コンテンツのサイズに関係なく、「コンテンツ」 div の高さと一致します。

これを実現するには、親div (「main」) は、display: flex; で設定する必要があります。および align-item: ストレッチ;。 display プロパティにより柔軟なレイアウトが可能になり、align-items:stretch により子要素が親の高さを満たすように垂直方向に引き伸ばされます。 align-items:stretch がデフォルト値ですが、他の値に設定しないように注意してください。

以上が複数列レイアウトの子 Div の高さを揃えるにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。

ソース:php.cn
このウェブサイトの声明
この記事の内容はネチズンが自主的に寄稿したものであり、著作権は原著者に帰属します。このサイトは、それに相当する法的責任を負いません。盗作または侵害の疑いのあるコンテンツを見つけた場合は、admin@php.cn までご連絡ください。
人気のチュートリアル
詳細>
最新のダウンロード
詳細>
ウェブエフェクト
公式サイト
サイト素材
フロントエンドテンプレート