Как это правильно очистить в IE 7?

Question

У меня есть контейнер div с серией тегов p.Каждый тег p будет плавать влево. Я хочу два p-тега на строку , поэтому подумайте поле / значение.

Заголовок : Некоторый заголовок
Автор : Некоторый автор

 <div id="container">
  <p class="field">Title</p><p>Some Title</p>
  <p class="field">Author</p><p>Some Author</p>
 </div>

Если я установил для класса «field» значение clear: Both, я получаю желаемую функциональность в большинстве браузеров, кроме IE 7 (не беспокоюсь <7).Однако в IE 7, если содержащийся div достаточно широк, ясно: оба, кажется, игнорируются, и я получу что-то вроде этого: </p>

Заголовок : Некоторый заголовок Автор:
Some Author

Несколько мыслей:

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

Как мне решить эту проблему?

Answer 1

Используйте этот шаблон (span является необязательным - для дополнительной стилизации, если необходимо).Списки имеют более смысловой смысл, чем повторное использование неправильных тегов.Это список.:)

<ul>
    <li><label>Title</label><span>Some Title</span></li>
     ...
</ul>

CSS:

ul, li {
    padding:0;
    margin:0;
    list-style-type:none
}  

li {
   clear:both
}

label {
   float:left;
   width:150px;
}

Answer 2

http://jsfiddle.net/QUL9v/1/

Использование тегов p ....

<div id="container">
    <p class="field">Title</p><p class="field">Some Title</p><div class="clear"></div>
    <p class="field">Author</p><p class="field">Some Author</p><div class="clear"></div>
</div>

с помощью css:

.field {
    float: left;
}

.clear {
    clear: both;
}

Это просто придерживается использованияр тег.Лично я так бы это и сделал (http://jsfiddle.net/QUL9v/3/):

<div id="container">
    <div class="field">Title</div>
    <div class="field">Some Title</div>
    <div class="clear"></div>
</div>
<div id="container">
    <div class="field">Author</div>
    <div class="field">Some Author</div>
    <div class="clear"></div>
</div>

Единственная причина, по которой я рекомендую это, заключается в том, что, поскольку это скорее проблема с макетом, для меня более естественно использовать div в противоположностьк элементу p. Кроме того, он обеспечит положение текста независимо от того, что вы помещаете в элементы div (якоря, формы, таблицы и т. д.).

Еще одна вещь, на которую следует обратить внимание, это яиспользуя клир в качестве последнего родственного брата вместо первого (как в ваших примерах). Если вы очищаете фронт, то возможно, что так как ваши конечные элементы плавающие и встроенные, вы можете столкнуться с ошибками вниздорога, особенно с IE7. Часто плавающее правило передается элементам, которые вы никогда не предполагали или думали, что оно будет передано. Очистка в конце гарантирует, что этого не произойдет.