0

我试图看看我是否可以让布局像 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 中方便。）

4

2 回答 2

1

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

在绝对定位模型中，一个盒子完全从正常流程中移除（它对后面的兄弟姐妹没有影响）并分配一个相对于包含块的位置。

您最好的选择是使用浮动和边距：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
}
于 2013-04-27T17:06:59.273 回答
0

我不知道我是否理解你。但是试试这个：

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;
}
于 2013-04-27T16:50:41.547 回答