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的显示更改为内联块

#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的宽度必须超过40px，因为内部div有10个边距和10个填充，即左边20个，右边20个。

所以，类似于：

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

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

#content { width: ... ; }

如果您在#content内浮动.box，则将#content的溢出设置为auto（或隐藏），否则外部框不会“看到”浮动内部框：



#content { overflow: auto; }

Answer 4

就我而言，我补充道：

#property { overflow: auto; }

现在，当我显示或隐藏元素时，元素的大小正在重新计算。