Блог

Главная - Вопросы по программированию - Как я могу выполнить очистку DIV

Как я могу выполнить очистку DIV

#css

#css

Вопрос:

У меня есть этот код, и я хотел бы, чтобы следующий абзац был выровнен по левому краю и ниже:

 <div class="content_hdr clearfix">
    <div class="clearfix content_hdr_heading">System Test</div>
    <div class="content_hdr_intro">
    <p>
Some text
    </p></div>
</div>

.clearfix:after{
  clear: both;
  content: ".";
  display: block;
  height: 0;
  visibility: hidden;
}

div.content_hdr_heading {
    float: left;
    background: #ff9999;
}

Я создал эту скрипку

Надеюсь, кто-нибудь сможет помочь.

Комментарии:

1. Почему заголовок перемещается влево? Справа от него, похоже, ничего нет.

2. Также рассмотрите элементы заголовка (H1, H2, …) для заголовка.

Ответ №1:

 <div class="content_hdr">
    <div class="content_hdr_heading">System Test</div>
    <div class="content_hdr_intro">
        <p>Some text</p>
    </div>
</div>

.content_hdr_heading {
    float: left;
    background: #ff9999;
}

.content_hdr_intro {
    clear: left;
}

Поскольку в этом случае после float есть очищающий элемент, в этом нет необходимости, но я обычно помещаю это в содержащий элемент floats, чтобы избежать головной боли при следующем содержимом:

 .content_hdr {
    overflow: hidden;
}

Комментарии:

1. Заголовок имеет фон. Без оставленного значения float фон переходит с одной стороны страницы на другую. Затем содержимое переходит ниже, но это не то, что я хочу. Я просто хочу, чтобы фон находился под заголовком words.

2. @Marilou Да, я догадался, что в конце концов, это имеет смысл.

3. Спасибо, что нашли время ответить. Я решил использовать ваше хорошее решение. Мэрилу

Ответ №2:

Рассмотрим это:

HTML:

 <div class="content_hdr">
    <div class="content_hdr_heading">
        <h2>System Test</h2>
    </div>
    <div class="content_hdr_intro">
        <p>Some text</p>
    </div>
</div>

CSS:

 div.content_hdr_heading {
    overflow:auto;    
}

div.content_hdr_heading h2 {
    float: left;
    background: #ff9999;
}

Живая демонстрация: http://jsfiddle.net/simevidas/HmkMj/3 /

Комментарии:

1. Спасибо Sime. Я решил использовать другое решение, но спасибо, что нашли время помочь.

Ответ №3:

p { очистить: оба; }

Вам не нужно clearfix, которое у вас там есть. Это кажется избыточным. Если это тег заголовка, использующий h1, h2 и т.д.