Question

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

我可以在javascript中修复它，但我想知道是否有CSS方法来实现它。

Answer 1

不，考虑到内容的偏移后，无法计算缩小到适合宽度，因为relative positioning的工作原理如下：

一旦根据正常流量布置了一个盒子或浮动，它可能相对于这个位置移动。这称为 relative 定位。以这种方式偏移盒子（B1）对于没有影响随后的框（B2）：B2被给予一个位置，好像B1没有偏移在应用B1偏移后，B2不会重新定位。

相反，您可以使用边距：

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>

最终计算位置后的收缩包裹，而不是初始计算的位置

1 个答案: