文章/答案/技术大牛

发布

社区首页 >问答首页 >Jquery在内部div上追加()，同时扩展外部div，以便内部div元素适合内部

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

Stack Overflow用户

提问于 2017-08-20 13:00:01

回答 3查看 906关注 0票数 2

我有类似于此的div结构。我使用jquery在div中附加id append的元素。但是，外部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})

有没有更好的方法来做这件事？

javascript

jquery

html

twitter-bootstrap-3

append

回答 3

Stack Overflow用户

回答已采纳

发布于 2017-08-20 13:04:47

你可以用纯CSS使用min-height和height:auto来做这件事，这会使expand DIV根据它的内容调整它的高度：

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

另外，将height:auto !important;添加到子元素以获得移动支持。

票数 1

Stack Overflow用户

发布于 2017-08-20 13:05:31

.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>

票数 1

Stack Overflow用户

发布于 2017-08-20 13:12:20

这可以通过以下方式完成

#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在所有设备上移动到下一行。

票数 1

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/45778614

复制

相似问题

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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

回答 3

Stack Overflow用户

Stack Overflow用户

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

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