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

在使用浮动元素时，通常使用另一个元素来清除布局中的内容。类似的东西：

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

Answer 2

请永远不要忘记overflow:hidden !!

将完整的CSS替换为：

.clearfix {
    overflow:hidden
}
.mdl_ftr {
    background:red;
    min-height:45px
}

在这种情况下甚至更好：

<强> HTML：

<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 class="mdl_ftr"></div>

<强> CSS：

.mdl_ftr {
    background:red;
    min-height:45px;
    clear:both
}

或许可以为您的页脚而不是类使用ID。（我猜你的页面上只有一个页脚？）

Answer 3

如果您的意思是在标签右侧，请将mdl_ftr放在clearfix和float:left;内;否则，请将高度设置为clearfix

Answer 4

是的，这很简单。我把div.clear放在了 div.clearfix的结尾。并将此添加到您的 css代码。 .clear {clear：both;身高：1％; }

<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 class="clear"></div> </div> <div class="mdl_ftr"></div>

如何让我的DIV清晰？

4 个答案: