Плавающий элемент, не включенный в родительский элемент, вызывает проблемы с нижним полем

Итак, у меня есть раздел страницы:

<div class="article">
    <div class="author">
        <img src="images/officers/john_q_public_thm.jpg" />
        <span class="name">John Q. Public</span>
        <span class="position">President</span>
    </div>
    <abbr class="postdate">
        <span class="month m-01">Jan</span>
        <span class="day d-31">31</span>
        <span class="year y-2009">2009</span>
    </abbr>
    <div class="content">
                <h2 class="title">Article Title</h2>
                <p>Pellentesque habitant morbi...facilisis luctus, metus</p>
                <p>Pellentesque habitant morbi...facilisis luctus, metus</p>
    </div>
</div>
<div class="article">...</div>
<div class="article">...</div>

Разделы author и abbr перемещаются влево. Каждый из этих article элементов div должен быть отделен от своих братьев и сестер на 5 пикселей или около того. Однако div author выходит за пределы технической «высоты» div. margin-bottom ничего не делает, так как место занято плавающим author.

Это довольно сложно представить, поэтому я разместил его на сервере.

Есть ли способ заставить родителя быть по крайней мере таким же высоким, как и все плавающие элементы внутри?

Если кто-то понял, о чем я, спасибо.


html css margin
person Christian Mann    schedule 06.04.2010    source источник

Ответы (3)


arrow_upward
1
arrow_downward

Вы можете поместить это внизу/внутри div.article (прямо перед закрытием div)

<div style="clear:both;"></div>

Или сделайте это:

http://www.sitepoint.com/blogs/2005/02/26/simple-clearing-of-floats/
person vinhboy    schedule 06.04.2010
comment
Ссылка на сайт была наиболее семантическим способом сделать это, имхо. Я ненавижу добавление элементов в DOM без необходимости. - person Christian Mann; 07.04.2010

arrow_upward
2
arrow_downward

В дополнение к вышеупомянутым хакам, вы можете установить overflow:auto; для article div, хотя это может иметь побочные эффекты в зависимости от того, какие другие правила у вас есть для этих div. Но это избавляет вас от необходимости добавлять элементы в HTML.

person tloflin    schedule 06.04.2010
comment
Вы правы, но vinhboy был первым с правильным ответом. (ссылка на сайт) - person Christian Mann; 07.04.2010
comment
Ах, так он и сделал. Не беспокойтесь, я оставлю это, чтобы указать на это вместо того, чтобы копировать / вставлять URL-адрес и искать в статье. - person tloflin; 07.04.2010

arrow_upward
0
arrow_downward

Вам нужно добавить очищающий элемент после ваших плавающих элементов. Что-то вроде этого обычно работает <br clear="both"/>, которое очистит как левые, так и правые поплавки и "дополнит" ваш содержащий элемент.

Вы можете указать both, left и right, которые очищают все плавающие элементы, плавающие слева и справа соответственно.

person Chris    schedule 06.04.2010