Question

我正在努力解决的问题：

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

<div class="external">
    <div class="internal">
        content
    </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;

Answer 2

我不确定你的问题是什么？你能提供更详细的代码/ css吗？如果你正在尝试使用代码，当你在内部div上进行任何大小更改并且margin: 10px保持在其间时，你会看到外部div会增长/缩小。

// 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);

Answer 3

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

这样的事情：.external { padding: 20px; }如果需要，你也可以将max-width设置为外部div。

当内部div增长/缩小但在它们之间保持差距时，使外部div增长/缩小

3 个答案: