使用'display: inline-block”和'position:absolute”時如何處理折疊容器？

使用混合顯示和定位來定位元素

CSS 中的display:inline-block 和position:absolute 組合可能會導致意外行為。當一個元素被絕對定位時，它的行為就好像它被從正常的內容流中刪除一樣，並且它的包含元素不知道它的高度。

內聯與絕對定位

display:inline-block 允許元素與其他元素並排水平流動，而position:absolute 從流中移除元素並根據上、下、左、右屬性定位它們。

絕對定位問題

在提供的程式碼中，position:absolute 元素(.element-right-b) 將其從流中刪除，並在計算整體高度時不考慮它.section 容器。結果，容器沒有固有高度並折疊為零。

解決方案

1. 設定容器高度：如果位置:absolute 是必不可少的，手動設定.section 容器的高度以防止其折疊。
2. 替代位置選項：如果絕對定位不是絕對必要的，請考慮使用 float 或 Sticky 代替。兩者都允許元素相對於其他元素定位自己，而不影響佈局。
3. Inline-Block with Padding：對於位置固定的多個巢狀列，設定所有巢狀元素的顯示:inline-block 並對後續列套用左側填充，以建立所需的縮排效果。

巢狀列的具體範例

以固定方式實現巢狀列位置，修改CSS如下：

<code class="css">.section span {
  display: inline-block;
}
.element-left {
  width: 200px;
}
.element-right {
  width: 100px;
}
.indent-1 {
  padding-left: 10px;
}
.indent-2 {
  padding-left: 20px;
}</code>

以上是使用'display: inline-block”和'position:absolute”時如何處理折疊容器？的詳細內容。更多資訊請關注PHP中文網其他相關文章！