一个div的高度与绝对定位的孩子

Question

我有一堆html绝对定位，然后html片段应该在那之后显示。但他们超过了一圈。

http://jsbin.com/okamot/1/edit

.drag-drop下的所有内容都应该是绝对放置的，因此.drag-drop的高度和宽度变为零。展览按钮和展览文本应该以粗体This is Drag and Drop Item显示。但是因为.drag-drop的高度为零，所以它显示在.drag-drop`的内容之上。

之前我遇到过这个问题，但幸运的是，很容易计算.drag-drop子项的高度，然后我会使用javascript将.drag-drop的高度设置为{{1}}。这次它更难，因为它包含更多的孩子，他们不是一成不变的。我如何更改我的css以使展览显示在拖拽下方？

Answer 1

绝对定位会从布局中删除元素，因此子元素不再是父元素大小计算的一部分。你需要使用JS来解决这个问题。

Answer 2

最好的方法是不要让内容绝对定位。你能让它们相对定位，还是漂浮它们？您仍然可以操纵它们的位置，高度，宽度等，并且它们具有布局，因此包含的div将具有正确的高度。

注意如果你漂浮它们，你可能需要添加一个＆＃34;浮动断路器＆＃34;在包含div的底部，让它正确计算高度： .... <div>some floated content</div> <br style="float: none;"/> // float-breaker right before containing div closes </div>

否则前一个回答者是正确的，你需要一些js hackery。