Как я могу сделать мой 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;
}

и примерная скрипка

Я бы хотел, чтобы цвет фона 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
}

И, возможно, использовать идентификатор для нижнего колонтитула вместо класса. (Я думаю, у вас есть только один нижний колонтитул на вашей странице?)

Answer 3

Да, это довольно легко.я ставлю 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>

Answer 4

Если вы имеете в виду после как справа от меток, то поместите ваши mdl_ftr внутри ваших clearfix и float:left;; в противном случае установите высоту на clearfix