当孩子们的位置时，使div准确适合孩子：绝对

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

我不知道我很了解你。但试试这个：

div.group { 
    position: absolute; 
    border: 1px solid red; 
    background: green; 
    width: auto; 
    min-width: ;// if you need one; 
    max-width: ;// if you need one; 
    padding: 0; 
} 

Answer 2

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

In the absolute positioning model，箱从正常 流完全去除（它有在以后的兄弟姐妹没有影响），并分配相对于含块 位置。

最好的办法是用浮标和边距：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 
}