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

【问题标题】：expand div to relative top-left positioned contents将 div 扩展到相对左上角定位的内容
【发布时间】：2012-03-13 22:18:46
【问题描述】：

我遇到了这个问题，我试图在一个页面上显示多个图表（基于 jsPlumb）。因为无论有多少可用空间，我都希望每个图表并排在一行上，所以我使用的是表格（如果我使用带有 float:left 的 div，如果没有足够的空间可用，一些 div 会向下移动到单独的行）。

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

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

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

【问题讨论】：

标签： javascript css-position jsplumb

【解决方案1】：

我有点生疏了，但我和你一样努力让 div 正确扩展以包含其内容。

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

因此，在您的情况下，这 3 个节点仍然堆叠在图表的左上角，即使它们看起来像是漂浮在图表之外。如果你去掉节点上的所有绝对和相对定位，你会看到表格的大小足以容纳它们的原始位置。

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

我不确定您的确切应用，但您可能需要创造性地指定间距的方式。如果你知道尺寸，你总是可以指定它们，但我猜你没那么幸运。你真的想设置相对于左上角的位置，还是仅仅相对于其他节点？我可能只是使用老式的边距。这应该允许您在维护块模型的同时指定需要适合表格的内容的位置。然后，如果您需要其中一个节点重叠，请使用绝对定位对其进行定位。

【讨论】：

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

【解决方案2】：

您是否尝试过将每个 div 显示为内联块并关闭封闭 div 上的换行？如果您希望具有动态宽度的内容在不换行的情况下水平显示，则不必求助于表格。

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

【讨论】：