如何在 IE 7 中正确清除它？

Question

我有一个带有一系列 p 标签的 div 容器。每个 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 足够宽，那么clear: 两者似乎都会被忽略，我会得到类似这样的内容：

Title: Some title Author:
一些作者的

一些想法：

1. 我可以监视包含 div 的宽度，以便只有两个 p 标签可以位于一行上，但这看起来非常脆弱。
2. 我可以通过在每两个 p 标签后面放置清除 div 来混淆标记。它会起作用，但让我感觉内心很脏。

我怎样才能克服这个问题？

Answer 1

使用此模式（跨度是可选的 - 如果需要，可用于其他样式）。列表比重新使用错误的标签更具有语义意义。这是一个清单。 :)

<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;
}

这只是坚持使用 p 标签。就我个人而言，这就是我实现它的方式（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 中。很多时候，浮动规则会传递到您从未打算或认为会传递到的元素。最后清除可确保这种情况不会发生。