Question

我有一个像这样的元素：

<div id="content" style="border: 2px solid black">
</div>

通过JQuery，我添加了一些新内容：

$("#content").append($('<div></div>').addClass("box"));

，其中

.box { margin: 10px; padding: 10px; border: 1px solid black }

但是当我这样做时，外部div没有调整大小，所以我得到一个内部盒子，它伸出一个坚固的外盒子。当我添加这个内盒时，如何让外盒调整大小？

Answer 1

如果选择器不是拼写错误，请更正选择

$("#content") // id="content" (correct)
$("content")  // tagName = content

并将div的显示更改为inline-block

#content {
    display: inline-block;
}

然后div不会占据整行。

Answer 2

试试这个：

JS

$('#content').append('<div class="box">&nbsp;</div>');

HTML

<div id="content" style="border:2px solid black;overflow:hidden;">
</div>

我希望他的帮助！

Answer 3

#content没有调整大小，因为width可能是在CSS中设置的。

要么使它更宽，要么特别适当地调整它。

看起来#content的宽度必须超过40像素，因为内部div有10个边距和10个填充，左边是20，右边是20。

所以，比如：

$("#content").css("width","100%").append($('<div></div>').addClass("box"));

或者更好的是，将CSS设置为正确的宽度以开头：

#content { width: ... ; }

如果您在.box内隐藏#content，请将overflow的{{1}}设置为#content（或隐藏），否则外框不会“看到”漂浮的内盒：

auto

Answer 4

就我而言，我添加了：

#property { overflow: auto; }

现在显示或隐藏元素时将重新计算元素的大小。