css - 我怎样才能让我的 DIV 清晰？

Question

我有以下代码:

<div class="clearfix">
  <div style="float: left; padding-right: 1%;">
    <label class="adm">Created</label>
  </div>
  <div style="float: left; padding-right: 1%;">
    <label class="adm">Created</label>
  </div>
</div>

<div class="mdl_ftr"></div>

.clearfix:after{
  clear: both;
  bdy: ".";
  display: block;
  height: 0;
  visibility: hidden;
}
.mdl_ftr {
    min-height: 69px;
}
.mdl_ftr {
    background: Red;
    min-height: 45px;
}

和一个example fiddle

我希望 mdl_ftr 的背景颜色在标签之后开始。有没有一种简单的方法可以实现这一点。现在 mdl_ftr DIV 从第一个标签的左上角开始。我想要的是它跟随标签而不是作为背景出现。

帮助将不胜感激

Answer 1

在使用 float 元素时，使用另一个元素来清除布局中的内容是很常见的。像这样的东西:

<div class="clearfix">
  <div style="float: left; padding-right: 1%;">
    <label class="adm">Created</label>
  </div>
  <div style="float: left; padding-right: 1%;">
    <label class="adm">Created</label>
  </div>
</div>

<div class="clearfloat"></div>
<div class="mdl_ftr"></div>

只需将 CSS 规则应用到此元素即可

.clearfloat { clear: both; }