javascript-将div扩展到相对左上角的内容

我在尝试在单个页面上显示多个图(基于jsPlumb)时遇到了这个问题.由于我希望每个图都可以并排在一行上,所以不管有多少可用空间,我都在使用一个表(如果我使用了带有float：left的div,则如果没有足够的可用空间,则某些div会在单独的位置上向下移动行).

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

我的问题是每个表单元格中的主graphDiv不会扩展以适合其内容.一些图节点div在其外部.我了解,当您将div定位为“绝对”时,不会考虑它们.但是我使用的是顶部/左侧坐标为“相对”定位的div.同样的事情适用吗？
如果是这样,对我来说扩展table-cell / graphDiv以覆盖其内容的最佳方法是什么？ (我已经尝试了所有明确的修复程序,并通过了所有与堆栈溢出有关的帖子,但找不到解决方案).

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

解决方法:

我有些生疏,但与您一样,我试图使div正确扩展以包含其内容也很痛苦.

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

因此,在您的情况下,即使3个节点看起来好像漂浮在图的外部,它们仍然堆叠在图的左上角.如果摆脱了节点上所有的绝对位置和相对位置,您将看到表格的大小足以容纳其原始位置.

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

我不确定您的确切应用程序,但是您可能需要在指定间距方面发挥创意.如果您知道尺寸,则可以随时指定尺寸,但是我想您并不那么幸运.您是否真的要相对于左上角或相对于其他节点设置位置？我可能只会使用老式的边距.这应该允许您在维护块模型的同时指定需要适合表的内容的位置.然后,如果需要其中一个节点重叠,请使用绝对定位对其进行定位.

标签：jsplumb,javascript,css-position
来源： https://codeday.me/bug/20191101/1984677.html