javascript - 当内部 div 增长/收缩时使外部 div 增长/收缩但在它们之间保持边距

Question

我要解决的问题:

我有一个包含 div 的外部 div。

<div class="external">
    <div class="internal">
        content
    </div>
</div>

内部和外部 div 之间的边距应始终相同。

当内部 div 增长/收缩时，外部 div 将修改其高度和宽度以与内部 div 保持指定的边距。内部 div 以某种方式控制着两个 div 的宽度和高度。当内部 div 增长时，外部 div 也会增长以保持边距。当内部 div 缩小时，外部 div 也会缩小以保持边距。

有人吗？感谢阅读。

Answer 1

默认情况下这是一个 CSS 的东西:

#internal {
    display: inline-block;
    width: 200px;
    height: 200px;
    background-color: red;
}
#external {
    display: inline-block;
    padding: 10px;
    background-color: #000;
}

或者您可以像这样为整个事物设置动画:

$("#internal").animate({width: "300px", height: "500px"}, {duration: 1000, step: function (now,PlainObject) {

    // PlainObject.prop is either 'width' or 'height'
    $("#external")[PlainObject.prop](PlainObject.now + 10);

}});

我假设当内部 div 动画时会发生收缩和增长？或者你的意思是当内部 div 的内容更大/更小(内部 div 中的文本更多/更少)？

inline-block 属性仅适用于纯 CSS 解决方案。如果您寻求动态 javascript 解决方案，则应将其设置为 display: block;