css - 在最终计算位置之后收缩包装，而不是初始计算位置

Question

我有一个包裹一系列行的包裹元素。每隔一行是 position:relative 和 left:40px，所以它当然在右边的 shrinkwrapping 元素之外。有没有办法让 shrinkwrapping 元素在计算最终位置后计算它的宽度和高度，而不是基于流中元素的初始位置？我正在使用 float:left，在 display:table 中尝试过，而 display:inline 只是一团糟，甚至根本没有 shrinkwrap。

我可以用 javascript 修复它，但我想知道是否有 CSS 方法可以做到这一点。

Answer 1

不，考虑内容的偏移量后无法计算收缩以适合宽度，因为relative positioning像这样工作:

Once a box has been laid out according to the normal flow or floated, it may be shifted relative to this position. This is called relative positioning. Offsetting a box (B1) in this way has no effect on the box (B2) that follows: B2 is given a position as if B1 were not offset and B2 is not re-positioned after B1's offset is applied.

相反，您可以使用边距:

margin-left: 40px;

#shrinkwrapper {
  float: left; /* Shrink-to-fit width */
  border: 3px solid blue;
}
#inner {
  width: 100px;
  height: 100px;
  margin-left: 40px;
  border: 3px solid red;
}

<div id="shrinkwrapper">
  <div id="inner"></div>
</div>