Question

我有一个div，它有一个可编辑范围的子项。

显然，可编辑范围的大小会不断变化。

因此，每当跨度的大小发生变化（希望不使用javascript）时，如何将div的高度和宽度设置为与跨度的高度和宽度相同？

CSS

#div-parent {
    position: absolute;
    top: 30px;
    left: 30px;
    height: auto;
    width: auto;
    background-color: grey;
}
#span-child {
    position: absolute;
    top: 0px;
    left: 0px;
}

HTML

<div id="div-parent">
    <span id="span-child" contenteditable>This is editable</span>
</div>

Answer 1

如果您需要父div使其高度和宽度适应孩子span，您可以这样做：

<强> FIDDLE

的CSS：

#span-child {
    width:100%;
    height:100%;
}

在Hashem Qolami发表评论后编辑

Span是一个内嵌元素，不需要height或width decleration，请参阅 Demo

Answer 2

如果从span元素中删除position: absolute，那么它将正常工作

DEMO http://jsfiddle.net/4k87M/4/

#span-child {
    background-color: red;
}

如何将父高度/宽度设置为可编辑span-child的高度/宽度？

2 个答案: