CSS：使auto div的宽度扩展到定位元素

Question

我遇到了问题。
如何使div扩展到定位元素的末尾。

＆＃13;

＆＃13;

.apple {
  background: #ccc;
  width: auto;
}

＆＃13;

<div class="apple">
  A for aplle
  <br><a style="position:relative; top:20px;">B for Ball</a>
</div>

＆＃13;

＆＃13;

＆＃13;

这里，div不接受位置改变元素的宽度。如何使它工作。感谢。

Answer 1

它正在做它应该做的事情。您将元素定位在它自然落在DOM中的20px下方，因此它位于灰色div之外。我了解你的情况可能会更复杂。你可以做点添加padding-bottom:20px吗？

＆＃13;

＆＃13;

.apple {
  background: #ccc;
  width: auto;
  padding-bottom: 20px;
}

＆＃13;

<div class="apple">
  A for aplle
  <br><a style="position:relative; top:20px;">B for Ball</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 2

尝试将display: table;添加到父级，将display: table-row;添加到子级。

＆＃13;

＆＃13;

.apple {
  background: #ccc;
  width: auto;
  display: table;
}
.apple a {
  display: table-row;
}

＆＃13;

<div class="apple">
  A for aplle
  <br><a style="position:relative; top:20px;">B for Ball</a>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 3

position: relative将元素从其原始位置移开（如果有顶部，底部，右侧或左侧设置），但仍保留其原始空间（原始（非移动）位置），你在你的例子中看到了。与static定位相反，它不会更改父元素的尺寸。

要解决此问题，您可以将a代码设为inline-block，删除相对定位并使用margin-top代替top。这将由父母包裹：

.apple {
  background: #ccc;
  width: auto;
}

<div class="apple">
  A for aplle
  <br><a style="display: inline-block; margin-top:20px;">B for Ball</a>
</div>