延伸高度以包括绝对定位的儿童

Question

我正在为CMS构建一个html/javascript主题设计器.元素绝对定位并且可以通过鼠标移动/调整大小,和/或包含可编辑的文本,其高度可以由行数确定.但是我遇到的问题是父元素的高度不会扩展以包含其绝对定位的子元素.

最小的代码(也在JSFiddle上):

<style>
    div.layer { position: absolute }
    div.layer1 { width: 400px; border: 1px solid #ccc }
    div.layer2 { top: 15px; left: 100px; width: 100px; border: 1px solid blue }
</style>
<div class="layer layer1">container should expand to the bottom of the child.
    <div class="layer layer2" contentEditable>Child with<br/>editable text.</div>
</div>

一个纯CSS的解决方案是理想的,我不关心旧的浏览器.但我主要是寻找任何方法来防止需要javascript在每个页面上运行使用创建的主题来设置它们的高度(因为具有相同主题的页面可能具有不同的文本量).

已经有一些类似的问题,但他们接受的答案(例如不使用绝对定位)在我的情况下不起作用.除非有办法让多层可拖动/可调整大小的元素没有位置:绝对.

Answer 1

我发现了一个纯粹的css解决方案!综上所述:

1. 将子元素设置为position:relative而不是absolute.
2. 将它们的margin-right设置为它们的负宽度,使它们的有效宽度为零,并使它们浮动:将它们全部放在同一条线上.这使得它们都具有0,0的原点.
3. 然后我们可以设置它们的left和margin-top属性,将它们放在父母的绝对位置.请注意,margin-top是必需的而不是top,因为top不会向下推动父元素的底部.

JSFiddle在这里或代码如下:

<style>
    div.layer { position: relative; float: left; }
    div.layer1 { width: 400px; border: 1px solid black }
    div.layer2 { margin-top: 20px; left: 100px; width: 100px; margin-right: -100px; border: 1px solid blue }
    div.layer3 { margin-top: 30px; left: 170px; width: 100px; margin-right: -100px; border: 1px solid red }
    div.layer4 { margin-top: 30px; left: 20px; width: 60px; margin-right: -60px; border: 1px solid green }
</style>
<div class="layer layer1" style="position: relative; display: block; width: 400px; border: 1px solid black;">
    Container
    <div class="layer layer2" contentEditable>Edit me</div>
    <div class="layer layer3">
        <div class="layer layer4" contentEditable>Edit me</div>
    </div>
</div>

Answer 2

绝对定位的元素从流中删除，因此被其他元素忽略

唯一的方法是将子位置设置为position：relative，这样就可以使用right，left，top和bottom来移动子位置，并将父显示更改为display：inline-block