2 つの浮動子 DIV を同じ高さにするにはどうすればよいですか?

浮動子 DIV の高さを等化する

問題:

2 つの浮動子 DIV を含む親 DIV、最初の子 DIV のみが一致するように高さを拡張します。コンテンツが親内で増加するときの親の高さ。 2 番目の子 DIV はデフォルトの高さのままで、不均一な外観が残ります。

解決策:

2 番目の子 DIV (.child-right) が確実に拡張されるようにするには、親と同じ高さの場合は、次の CSS を親 .parent と子 .child-right に適用します。要素:

.parent {
    overflow: hidden;
    position: relative;
    width: 100%;
}

.child-right {
    background: green;
    height: 100%;
    width: 50%;
    position: absolute;
    right: 0;
    top: 0;
}

説明:

• オーバーフローの設定: 親要素で非表示にすることで、子 DIV のコンテンツが親の境界をオーバーフローするのを防ぎます。
• 親要素を相対的に配置すると、子 DIV がその要素内で絶対配置を使用できるようになります。
• 親要素で幅: 100% を設定すると、コンテナの幅全体が占有されます。
• 子 DIV で高さ: 100% を設定すると、高さまで拡張されます。
• 幅: 50% は、親の半分を占めることを保証します。 width.
• right: 0 および top: 0 を使用した絶対配置では、子 DIV が親の右上隅に配置され、右端に揃えられます。

これを使用することにより、 CSS プロパティを組み合わせると、浮動子 DIV は親 DIV の高さに一致するように拡張され、両方の子の間で高さが均等になります。

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