如何使父級 Div 擴展以適合其絕對定位的子級？

根據絕對位置的子Div 調整父Div 高度

在網頁設計中，通常需要將元素定位在父容器中非線性時尚。這可以使用絕對定位來實現，它將元素從正常的文件流中刪除。然而，當嘗試讓父級 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 進行高度計算。

替代方案

為了解決這個問題，有兩個主要選項:

• 手動調整大小：使用非CSS 方法，例如作為JavaScript，重新定位div 並動態調整父級的高度。
• CSS 版面： 使用 CSS flexbox 或網格版面來反轉元素的視覺順序。這樣可以在保持元素流的同時靈活定位。

以上是如何使父級 Div 擴展以適合其絕對定位的子級？的詳細內容。更多資訊請關注PHP中文網其他相關文章！