我试图看看我是否可以让布局工作,就像graphviz在对节点进行分组时一样。本质上,我可以将节点放置在任何位置,然后在虚线轮廓周围放置一个框。当孩子们的位置时,使div准确适合孩子:绝对
所以我有一些HTML这样的:
<div class="graph">
<div class="group" id="group1">
<div class="node" id="node1">1</div>
<div class="node" id="node2">2</div>
</div>
<div class="group" id="group2">
<div class="node" id="node3">3</div>
<div class="node" id="node4">4</div>
</div>
</div>
我想要的节点的位置是我控制的主要事情。我发现我可以对两者都使用绝对定位,但必须以节点位置的数学计算为代价,因为它们与组相关。所以我结束了CSS这样的:
div.graph {
position: relative;
background: yellow;
padding: 0;
}
div.group {
position: absolute;
border: 1px solid red;
background: green;
width: 100%;
padding: 0;
}
div.node {
position: absolute;
background: blue;
height: 20pt;
padding: 0;
}
#group1 { left: 20pt; top: 20pt; height: 40pt; }
#group2 { left: 50pt; top: 60pt; height: 40pt; }
#node1 { left: /*20-20=*/0pt; top: /*20-20=*/0pt; }
#node2 { left: /*200-20=*/180pt; top: /*40-20=*/20pt; }
#node3 { left: /*50-50=*/0pt; top: /*60-60=*/0pt; }
#node4 { left: /*800-50=*/750pt; top: /*80-60=*/20pt; }
这样做的结果可能对我使用,试图修复它的JSFiddle可以看出。
本质上,我无法弄清楚的是组的宽度。我不知道节点会有多宽,因为内容是可变的。我尝试使用100%作为折衷方案,但无论如何,一旦涉及到水平滚动条,它的宽度也不会达到100%。理想情况下,有一种方法可以让它完全停止在节点的右侧(稍后我可以计算出填充情况......此刻它被设置为0)。
我没有'不想动态使用JavaScript来计算宽度,因为我担心不得不应对宽度变化。
如果一切都失败,我可能只需要使用SVG,但是我在SVG有各种问题上,以及(文本布局是不是很方便,因为它是在HTML。)
问题已与CSS格式模型是如何工作的事情。绝对定位的元素不会影响包含块元素的计算宽度或高度。因此,您无法使用当前的HTML/CSS获得所需的效果。您可能不得不重新考虑您的方法并使用相对位置和边距,或者根据节点位置设置“.group”。这是一个有挑战性的问题。 – 2013-04-27 16:59:41