div 的宽度和 position:absolute 的内容

Question

我有 div 没有固定宽度（这个 div 应该有内容的宽度）里面有 div 有 position:absolute 和固定宽度，但是相对div 有 0px 宽度，我该如何解决？

<div class="container" style="position:relative">
  <div class="innerContainer" style="position: absolute; width: 30px; height: 10px"></div>
</div>

Answer 1

绝对定位的 div 从正常流中取出，因此不会影响，在这种情况下，它的 parent 高度。 parent 将显示为没有内容（高度为 0 像素）。

在您的情况下，您需要为 parent（容器）提供足够大的高度，以便绝对位置内容适合或用正常流动的内容填充它，并让内部 div像这样位于左侧和底部。

.container {
  position:relative;
  min-height: 50px;
  background: gray;
  padding-left: 40px;
}

.innerContainer {
  position:absolute;
  left: 0;
  top: 0;
  width: 30px; 
  height: 10px;
  background: darkgray;
}
.innerContainer:nth-child(2) {
  top: auto;
  bottom: 0;
  background: lightgray;
}

<div class="container">
  <div class="innerContainer"></div>
  <div class="innerContainer"></div>
</div>

<br>

<div class="container">
  <div class="innerContainer"></div>
  <div class="innerContainer"></div>
  This has text that sizes itself<br>
  This has text that sizes itself<br>
  This has text that sizes itself<br>
</div>

div 的宽度和 position:absolute 的内容

Width of div with position:absolute content

html

css

css-position