将div扩展到相对于左上角定位的内容

Question

我有个问题，我正在尝试在一页上显示多个基于jsPlumb的图表。由于我希望每个图表都在同一行上并排显示，无论有多少空间可用，我使用了一个表格（如果我使用带有float:left的divs，如果没有足够的空间可用，则其中一些div会移到单独的一行）。

现在，每个表格单元格包含一个主要div，该div又包含两个或更多节点div。 jsPlumb的工作方式是创建每个节点的单独div。我需要将每个节点定位到相对于其父div的特定top/left。

我的问题是，每个表格单元格中的主图形Div不会展开以适应其内容。其中一些图形节点div在其外面。我理解当您有"absolute"定位的div时它们不会被考虑。但是，我正在使用具有top / left坐标的"relative"定位的div。是否也适用相同的情况？如果是这样，最好的方法是什么来扩展表格单元格/ graphDiv以覆盖其内容？（我已尝试了所有清除修复程序，并查看了所有堆栈溢出相关帖子，但找不到解决方案。）

这里是我设置的 jsfiddle 页面链接：http://jsfiddle.net/7QkB2/28/

- Johnny

Answer 1

我有点生疏，但我理解你为了让div正确地扩展以包含它们的内容而感到痛苦。

如http://reference.sitepoint.com/css/relativepositioning所述，当您使用相对定位时，实际上是留下了一个空洞，原来的内容就在这里。我认为这几乎可以看作是一种视觉幻觉-对象仍然保留着在旧位置上的一个不可见块，但它看起来好像已经移动了。

因此，在您的情况下，尽管这些节点看起来像漂浮在外面，但它们仍然堆叠在图表的左上角。如果您去掉节点上所有的绝对和相对定位，您将看到表格被调整大小以适应它们原来的位置。

我建议通常只在您只需要将内容移动几个像素时使用相对定位。为什么他们设计CSS工作方式是个谜，但也许这与渲染引擎的限制有关？当您使用绝对定位时，对象不再具有在文档中占据空间的“盒子”。它很容易定位，但不会像您观察到的那样影响其他任何东西的间距。

我不确定您的确切应用程序，但您可能需要在如何指定间距方面有所创意。如果您知道尺寸，那么您总是可以指定它们，但我猜您没有那么幸运。您真的想将位置相对于左上角，还是只相对于其他节点？我可能会使用传统的边距。这应该允许您指定需要适合表格的内容的位置，同时保持块模型。然后，如果您需要其中一个节点重叠，可以使用绝对定位来定位它。

- JimmyTheHack

---

感谢您对“相对定位”的解释。我想我可以以某种方式将我的节点相对定位，但当图形增长时，它变得非常复杂。使用x/y（顶部/左侧）坐标使它变得更容易。所以我试图做的是将它们相对于它们的父容器（在这种情况下是表格单元格内的graphDiv）定位。最终看起来我将不得不采用纯绝对定位并自己计算每个图形的边界。 - Johnny

Answer 2

您尝试将每个div显示为inline-block，并关闭包含div的换行吗？如果您希望具有动态宽度的内容水平显示而不换行，则无需使用表格。

div.graph {
  display: inline-block;
}
div.graph-container {
  white-space: nowrap;
}

- Richard Connamacher