Floated Div を親の高さまで拡張するにはどうすればよいですか?

親と一致するように浮動 Div の高さを拡張する

浮動子要素は、親コンテナの垂直方向の配置を乱す可能性があります。この問題に対処し、浮動子 div の高さがその親と一致するように拡張されるようにするには、次の手順に従います。

1.親プロパティの設定:

次の CSS プロパティを親要素に追加します:

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

• overflow: hidden は、子要素が親コンテナの外にオーバーフローするのを防ぎます。
• position:relative は、子要素の相対位置コンテキストを確立します。
• width: 100% は、親 div がコンテナの全幅を占めることを保証します。

2.浮動子の構成:

浮動子の div (例: .child-right) の場合、次の CSS プロパティを適用します:

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

• 背景: 緑色は視認性を高めるために緑色の背景色。
• 高さ: 100% は子の高さを設定します。
• width: 50% は、子 div の幅を親の幅の半分として定義します。
• position: 絶対的に、通常のドキュメント フローから子 div を削除します。
• right: 0 は子 div をコンテナの右端に揃えます。 parent.
• top: 0 は、子 div を親の上端に揃えます。

これらの CSS プロパティを実装することにより、浮動子 div はそれに一致するように高さを自動的に拡張します。親のレイアウトを変更し、垂直方向に整列したレイアウトを確保します。

以上がFloated Div を親の高さまで拡張するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。