Question

我有没有固定宽度的div（此div应该有宽度，因为它的内容）在其中有div position:absolute和固定宽度，但相对div有{{1} } width，我该如何解决？

＆＃13;

0px

＆＃13;

Answer 1

绝对定位的div从正常流中取出，因此在这种情况下不影响其父高度。父母将显示没有内容（0px高）。

在你的情况下，你需要给你的父（容器）一个足够大的高度，使绝对位置内容适合或用正常的流动内容填充它，并让内部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的宽度与位置：绝对内容

1 个答案: