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

CSS：display:inline-block 和positioning:absolute

这个问题探讨了同时使用display: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中文网其他相关文章！