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来执行此操作，这会导致expand DIV根据其内容调整其高度：

#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;
}

Clear属性会删除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移动到所有设备的下一行。

Jquery在内部div上追加（）扩展外部div，以便内部div元素适合内部

3 个答案: