Div扩展到绝对定位内容的大小

Question

我有一个包含几个绝对定位的div的Div。顶层的可点击区域扩展到子区域，但绘制区域不会。我希望绘制的区域包围所有容器div。

代码的JSFiddle就在这里 - http://jsfiddle.net/VolatileStorm/C29P8/

经过几次刷新后，您可能会注意到左上角有一个小红框（由div隐藏）。这是容器，我想让它包围孩子们。

有什么想法吗？三江源。

Answer 1

绝对定位的元素被从页面流中取出，因此您可以使用JS来读取子节点的尺寸以设置父节点的尺寸，或者只是设置高度和宽度。相对div的宽度。

Answer 2

使用getBoundingClientRect()找出所需的实际宽度。

工作演示：http://jsfiddle.net/C29P8/137/。

Answer 3

看到你已经有了JS选项，我会给你一个使用CSS。它可能会成为一种黑客攻击，但它可以工作：http://jsfiddle.net/C29P8/131/

想法是删除所有定位元素，将“.pile”容器设置为float: left;，将其扩展为适合内容（也将注释设置为float: left;，因为它们没有定位） ，并使用{。1}和margin-left: -100px;中的padding-left: 110px移动音符（额外的10px填充只允许音符旋转，使其保持在红色边框内）“.pile”这样每个音符都是相互重叠的。

我在解释它时并不擅长，对不起，所以我已经在JSFiddle页面上评论了我添加和更改的代码，希望这些代码更加清晰。