0

我试图解决的问题：

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

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

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

当内部 div 增长/缩小时，外部 div 将修改其高度和宽度以保持与内部 div 的指定边距。不知何故，内部 div 正在控制两个 div 的宽度和高度。当内部 div 增长时，外部 div 也会增长以保持边距。当内部 div 缩小时，外部也会保持边距。

任何人？谢谢阅读。

4

3 回答 3

2

默认情况下这是一个 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;

于 2013-02-01T13:50:06.017 回答
1

我不确定你有什么问题？您能否提供一些更详细的代码/css？如果您正在尝试以下代码，您将看到外部 div 将增长/缩小，当您对内部 div 进行任何大小更改并且margin: 10px保持在两者之间时。

// jQuery snippet tested in my browser's console:
$(document.body).append($('<div id="external">').append($('<div id="internal">').css({margin: '10px', backgroundColor: '#f00', height: '100px', width: '100px', display: 'inline-block'})).css({backgroundColor: '#000'}));

//resize:
$('#internal').height(200);
$('#internal').width(200);
于 2013-02-01T13:47:59.880 回答
0

您应该在外部 div 上使用一些填充而不设置固定的宽度或高度。让

像这样：.external { padding: 20px; }如果需要，您还可以将 max-width 设置为外部 div。

于 2013-02-01T13:34:55.760 回答