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

时间:2013-02-01 13:19:33

标签: javascript jquery css

我正在努力解决的问题:

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

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

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

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

任何?谢谢你的阅读。

3 个答案:

答案 0 :(得分: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;

答案 1 :(得分:1)

我不确定你的问题是什么?你能提供更详细的代码/ 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);

答案 2 :(得分:0)

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

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