3

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

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

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

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

4

2 回答 2

2

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

div.graph {
  display: inline-block;
}
div.graph-container {
  white-space: nowrap;
}
于 2013-03-10T21:11:10.883 回答
2

我有点生疏，但我和你一样在试图让 div 正确扩展以包含其内容时感到痛苦。

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

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

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

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

于 2012-03-13T23:36:45.150 回答