将div扩展为相对左上角的内容

Question

我有这个问题，我试图在一个页面上显示多个图形（基于jsPlumb）。因为我希望每个图形在一行上并排，无论有多少空间可用我使用表格（如果我使用带有浮点数的div：left，如果没有足够的空间可用，则一些div会在单独的位置向下移动行）。

现在每个表格单元格都包含一个主div，而div又包含两个或多个node-div。 jsPlumb的工作方式是为每个节点创建一个单独的div。我需要将每个节点放在相对于其父div的特定顶部/左侧。

我遇到的问题是每个表格单元格中的主graphDiv没有展开以适应其内容。一些图形节点div在它之外。我明白，当你有“绝对”定位的div时，他们不会被考虑在内。但我使用“相对”定位div与顶部/左侧坐标。同样的事情适用吗？ 如果是这样，那么扩展table-cell / graphDiv以覆盖其内容的最佳方式是什么？ （我已经尝试了所有明确的修复，并通过所有堆栈溢出相关的帖子，但找不到解决方案）。

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

Answer 1

我有点生疏，但我分担了你试图让divs适当扩展以包含其内容的痛苦。

正如本页http://reference.sitepoint.com/css/relativepositioning所解释的那样，当你使用相对定位时，实际上你会留下一个曾经是内容的洞。我认为它几乎就像一个视错觉 - 物体仍旧保留一个看不见的块在它的旧位置，但它看起来好像已经移动了。

因此，在您的情况下，3个节点仍然堆叠在图形的左上角，即使它们看起来像是在它们之外浮动。如果你摆脱了节点上的所有绝对和相对定位，你会看到桌子的大小足以适应它们原来的位置。

如果您只将内容移动几个像素，我建议通常只使用位置相对。为什么他们设计css以这种方式工作对我来说是一个谜，但也许它与渲染引擎的局限有关？当您使用绝对位置时，对象不再有“框”占用文档中的空间。它很容易定位，但不会影响你观察到的任何其他东西的间距。

我不确定您的确切应用，但您可能需要了解如何指定间距。如果你知道尺寸，你可以随时指定它们，但我猜你不是那么幸运。你真的想设置相对于左上角的位置，还是只相对于其他节点？我可能只是使用过时的利润。这应该允许您在维护块模型的同时指定需要适合表的内容的位置。然后，如果您需要其中一个节点重叠，请使用绝对定位来定位它。

Answer 2

您是否尝试将每个div显示为内联块并关闭封闭div上的换行？如果您希望具有动态宽度的内容水平显示而不进行换行，则不必使用表格。

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