10

我正在为 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 来设置它们的高度（因为具有相同主题的页面可能有不同数量的文本）。

已经有一些类似的问题，但他们接受的答案（例如，不使用绝对定位）在我的情况下不起作用。除非有一种方法可以拥有多层可拖动/可调整大小的元素而不是位置：绝对。

4

3 回答 3

19

我找到了一个纯 CSS 解决方案！总之：

  1. 将子元素设置为位置：相对而不是绝对。
  2. 将它们的 margin-right 设置为它们的负宽度，使它们的有效宽度为零，并使它们浮动：left 使它们保持在同一行。这使得它们都具有 0, 0 的原点。
  3. 然后我们可以设置它们的 left 和 margin-top 属性以将它们绝对定位在它们的父级中。请注意，margin-top 是必需的，而不是 top，因为 top 不会下推父元素的底部。

JSFiddle here或下面的代码：

<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>
于 2013-09-23T15:29:04.300 回答
5

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

您唯一的方法是将子位置设置为position:relative，这样就可以使用右、左、上和下移动它，也可以将父显示更改为display:inline-block

于 2013-09-22T19:44:34.313 回答
2

如果你想让孩子保持绝对定位，你可以使用以下脚本来调整容器的大小：http: //jsfiddle.net/6csrV/7/

var layer1 = document.getElementsByClassName('layer1'),
    i = 0, len = layer1.length, childHeight;
for(; i < len; i++) {
    childHeight = layer1[i].getElementsByClassName('layer')[0].clientHeight;
    layer1[i].style.height = childHeight + 'px';
}
document.addEventListener('keyup', function(e) {
    if(e.target.className.indexOf('layer2') !== false) {
        e.target.parentNode.style.height = e.target.clientHeight + 'px';
    }
});
于 2013-09-22T19:51:19.440 回答