Дивы с плавающим изображением не выстраиваются в ряд

Question

Я собрал простую систему, чтобы мой папа мог управлять сайтом для своей клубной волейбольной команды.Он не очень хорошо разбирается в HTML-разметках, поэтому я стараюсь сделать его максимально простым для него.Вот что он у меня есть прямо сейчас:

<div class="text_block">
    <h2>section heading</h2>
    <image src="" />  <- optional image
    <p> </p>
    <p></p> 
    <p></p> 
    <p></p> 
</div>

со следующими правилами css:

.text_block {
padding : 1em 0;
min-height : 300px;
}
.text_block img {
float : left;
padding : 0 25px 15px 0;
}
.text_block p {
text-align : justify;
padding : 0 1.5em;
}

без объявления минимальной высоты в div-обёртке. Я получаю беспорядки вот так:

Грязные абзацы http://img.skitch.com/20100801-dcb4x7uw41gkn48x1fdahys994.jpg.

, так как некоторые изображения не имеют большого количества текста в своей div-оболочке.

Когда я действительно включаю элемент минимальной высоты, мы получаем большойпробелы, где есть небольшие абзацы и нет изображений.В худшем случае я мог бы сделать так, чтобы он пометил div «text_block» как «text_block has_image» для тех, у кого есть изображения, но я хотел бы сделать это как можно более простым.Был бы очень признателен.

Answer 1

Используйте свойство clear в классе text_block:

.text_block { clear: both; }

Answer 2

Ваш .text_block не очищает поплавки , установите overflow:hidden; zoom:1; и удалите минимальную высоту. Это должно привести вас в порядок.

Вы также можете установить clear:both;, чтобы очистить поплавки выше. Причина, по которой я бы выбрал первое, заключается в том, что при проверке элемента, поскольку он очищает себя от размеров / границ с помощью инструмента проверки (Firebug и т. Д.), Он будет выглядеть «правильно». Конечно, визуально это не имеет значения, но мне это нравится.

Answer 3

Проблема в том, что поскольку ваш контейнерный элемент div не перемещается, он выталкивается изображением, когда теги p не занимают достаточно места.

Вы также можете перемещать элементы контейнера, чтобы все оставалось внутри (хотя это может вызвать некоторые проблемы с тем, что содержит элементы контейнера)

Другой вариант - добавить очищающий div в конце каждого контейнера

div.clear {
  float:none;
  clear:both;
  }