html插入后重新计算div高度

Question

我有一个div＆＃34; track-panel＆＃34;包含另一个div＆＃34;摘要＆＃34;这一开始是空白的。

＆＃13;

＆＃13;

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css';
#track-panel { border: 1px solid; }

＆＃13;

<div id="track-panel">
  <section class="summary">
    <div class="clearfix">Foo</div>
    <div class="col-md-12" id="summaries"></div>
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;

然而，在某些时候我会在＆＃34;摘要＆＃34;中插入一些文字。它显示在OUTSIDE＆＃34; track-panel＆＃34;。

＆＃13;

＆＃13;

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css';
#track-panel { border: 1px solid; }

＆＃13;

<div id="track-panel">
  <section class="summary">
    <div class="clearfix">Foo</div>
    <div class="col-md-12" id="summaries">Bar</div>
  </section>
</div>

＆＃13;

＆＃13;

＆＃13;

Answer 1

问题是如果文档的最小宽度为992px，.col-md-12会浮动。但是，您不清除浮动。

您不需要浮动它，所以只需删除该类。

@import 'https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css';
#track-panel {
  border: 1px solid;
}

<div id="track-panel">
  <section class="summary">
    <div class="clearfix">Foo</div>
    <div id="summaries">Bar</div>
  </section>
</div>