Jquery append() 在内部 div 上，同时扩展外部 div，以便内部 div 元素适合内部

Question

我有与此类似的div 结构。我正在使用 jquery 将元素附加到div 中，并附加 id 。但是，外部div 不会自动扩展以适应附加的元素。

<div class="well" id='expand'>
<div class="container">
<!-- some other divs -->
</div>
<div id= "append">
</div>
</div

我通过增加外部div的高度解决了这个问题，即

var div_height = $('#expand').height();
$('#expand').css({"height":div_height + append_height})

有没有更好的方法可以做到这一点？

Answer 1

您可以使用min-height和height:auto使用纯CSS来执行此操作，这会导致expandDIV根据其内容调整其高度：

#expand{
height:auto;
min-height:50px;
height:auto !important;  /* for IE as it does not support min-height */
}

还要向子元素添加height:auto !important;以支持移动。

Answer 2

.parent {
display: flex;
border: 2px solid #222;
flex-direction: row;
padding: 10px;
}
.parent .child {
padding-right: 10px;
flex-grow: 1;
width: 33%;
}
.parent .child:last-child {
padding-right: 0;
}
.parent .child .content {
border: 1px solid blue;
height: 100%;
}
.parent .child:first-child .content {
border: 1px solid red;
}

<div class="parent">
<div class="child">
<div class="content">
blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
</div>
</div>
<div class="child">
<div class="content">Div 2</div>
</div>
<div class="child">
<div class="content">Div 3</div>
</div>
</div>

Answer 3

这可以通过以下方式完成

#expand{
height: auto;
clear: both;
}

清除属性将擦除div 中的任何浮点值(左或右(。这可以防止由于内部div 的浮点属性而导致外部div 的宽度扩展。 如果您对响应能力有任何问题，可以使用一些简单的 HTML：

<div class="well" id='expand'>
<div class="container">
<div><!-- content --></div>
<br>
<div><!-- content --></div>
</div>
<div id= "append">
</div>
</div>

添加换行标记可确保div 在所有设备上移动到下一行。