html - 当 children 的位置 :absolute 时，使一个 div 完全适合 children

Question

我试图看看我是否可以让布局像 graphviz 在对节点进行分组时所做的那样工作。从本质上讲，我可以将节点放置在任何位置，然后在带有虚线轮廓的节点周围放置一个框。

所以我有一些像这样的 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 中那样方便。)

Answer 1

你不能用绝对定位来做到这一点。根据规范，

In the absolute positioning model, a box is removed from the normal flow entirely (it has no impact on later siblings) and assigned a position with respect to a containing block.

最好的办法是使用 float 和边距:http://jsfiddle.net/WspTQ/

<div class="a">
    <div class="c">
        <div class="x"></div>
        <div class="y"></div>
    </div>
</div>
<div class="b">
    <div class="c">
        <div class="x"></div>
        <div class="y"></div>
    </div>
</div>

.a, .b {
    margin-bottom:10px;
    float:left;
    clear:both;
    background:#eee
}
.x, .y {
    width:50px;
    height:50px;
    background:black
}
.x {
    margin-bottom:-50px
}
.a .y {
    margin-left:100px;
    margin-top:20px
}
.b .y {
    margin-top:75px;
    margin-left:150px
}