如何在CSS中使用“display: inline-block”和“position:absolute”來保持容器高度？

CSS：display:inline-block 和positioning:absolute

這個問題探討了同時使用displaySS:inline- 時CSS 元素的行為塊和定位：絕對。提供了以下 HTML 程式碼：

<code class="html"><div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-a">some text</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-a">some more text to force line wrapping</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-b">some text</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-b">some more text to force line wrapping</span>
</div>

<div class="section">
  <span class="element-left">some text</span>
  <span class="element-right-b">some more text to force line wrapping</span>
</div></code>

使用以下 CSS：

<code class="css">.section {
  display: block;
  width: 200px;
  border: 1px dashed blue;
  margin-bottom: 10px;
}
.element-left,
.element-right-a,
.element-right-b {
  display: inline-block;
  background-color: #ccc;
  vertical-align: top;
}
.element-right-a,
.element-right-b {
  max-width: 100px;
}
.element-right-b {
  position: absolute;
  left: 100px;
}</code>

提出的問題是 絕對定位的元素會使其包含框失去高度。此問題尋求解決此問題的方法，同時在 .section 框中保持絕對定位。

理解問題

使用position:absolute;時，元素的位置將從正常頁面流中刪除。因此，它不再影響其包含元素的佈局，包括其高度。因此，容器元素（在本例中為 .section 框）將失去其高度的跟踪，並採用零高度，除非另有指定。

此外，display:inline-block;不適用於絕對定位的元素，因為絕對定位會覆寫此顯示模式，從而有效地將其設為 display:block。

解決高度問題

要解決高度問題，必須明確設定.section 框的高度。然而，考慮到所需的佈局，使用絕對定位可能不是最合適的方法。

替代解決方案

所需的佈局，即第二列與每個區塊內的固定位置對齊，可以無需使用絕對定位即可實現。這是一個替代解決方案：

<code class="html"><div class="section">
  <span class="element-left"><span class="indent-0">some text</span></span>
  <span class="element-right">some text</span>
</div>

<div class="section">
  <span class="element-left"><span class="indent-1">some text</span></span>
  <span class="element-right">some text</span>
</div>

<div class="section">
  <span class="element-left"><span class="indent-2">some text</span></span>
  <span class="element-right">some text</span>
</div></code>

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

透過添加額外的標記來表示縮排等級並使用帶有填充的相對定位技術，我們可以輕鬆實現所需的佈局。

以上是如何在CSS中使用“display: inline-block”和“position:absolute”來保持容器高度？的詳細內容。更多資訊請關注PHP中文網其他相關文章！