絶対に配置された子に合わせて親 Div を拡張するにはどうすればよいですか?

絶対位置の子 Div に基づいて親 Div の高さを変更する

Web デザインでは、多くの場合、親コンテナ内の要素を次の位置に配置する必要があります。非直線的なファッション。これは、通常のドキュメント フローから要素を削除する絶対配置を使用して実現できます。ただし、絶対位置の子を収容するために親 div の高さを拡張しようとすると、一般的な問題が発生します。

問題

次の HTML と CSS を考えてみましょう。

<div>

parent { position: relative; width: 100%; }
child1 { width: auto; margin-left: 160px; }
child2 { width: 145px; position: absolute; top: 0px; bottom: 0px; }

このシナリオでは、child2 には動的な高さがあり、child1 の下に表示される必要があります。ただし、親 div #parent は child2 の高さを含むように拡張されません。

解決策

この問題は、絶対位置の要素が削除されるために発生します。流れ。その結果、それらは他の要素によって無視され、親 div が高さの計算に child2 を考慮しなくなります。

代替

これに対処するには、主に 2 つのオプションがあります。 :

• 手動サイズ変更: 非 CSS を使用するJavaScript などのアプローチを使用して、div の位置を変更し、親の高さを動的に調整します。
• CSS レイアウト: CSS フレックスボックスまたはグリッド レイアウトを使用して、要素の視覚的な順序を反転します。これにより、要素の流れを維持しながら、柔軟な配置が可能になります。

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