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

Question

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

css

4

我有一个Div，其中包含几个绝对定位的div。顶级可点击区域扩展到子元素的区域，但绘制的区域不是这样。我想让绘制的区域围绕所有容器div。

代码的JSFiddle在这里 - http://jsfiddle.net/VolatileStorm/C29P8/ 刷新几次后，您可能会注意到左上角有一个小红框（被divs隐藏）。这是容器，我希望它能包围孩子们。

有什么想法吗？谢谢。

- V.S.

3个回答

2

绝对定位的元素会脱离页面流，因此您可以使用JS读取子元素的尺寸以设置父元素的尺寸，或者在相对定位的div上设置高度和宽度。

- Beth Budwig

1

可以将高度和宽度设置为稍大于元素的尺寸，以便考虑到突出的角落。 - ayyp

2

通过使用getBoundingClientRect()查找您需要的实际宽度。

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

- gilly3

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- Lenny · Accepted Answer

既然您已经有了一个JS选项，我将提供一个使用CSS的选项。它可能会被视为某种黑客方式，但它有效：http://jsfiddle.net/C29P8/131/ 这个想法是删除所有定位元素，将“.pile”容器设置为float: left;，这样可以扩展它以适应内容（也将注释设置为float: left;，因为它们没有定位），并使用“.note”中的margin-left: -100px;和“ .pile”中的padding-left: 110px（额外的10px填充只是为了保持便签的旋转在红色边框内）来移动便签，以便每个便签都绘制在彼此之上。

我不太擅长解释它，抱歉，因此我已经在JSFiddle页面上添加和更改了代码的注释，这应该更清晰。