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之外的大多数浏览器中都获得了所需的功能（不用担心＆lt; 7）。但是，在IE 7中，如果包含div足够宽，那么明确：两者似乎都被忽略了，我会得到这样的结果：

标题：某些标题作者：
一些作者

有几点想法：

我可以监视包含div的宽度，这样只有两个p标签可以放在一条线上但看起来非常脆弱。
我可以通过在每两个p标签后放置清除div来使标记混乱。它会起作用但让我觉得内心很脏。

我如何克服这个问题？

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

这只是坚持使用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中放置什么（锚点，表格，表格等）。

你应该注意的另一件事是我使用clear作为最后一个兄弟而不是第一个（如你的例子中所示）。如果你正在清理前面;那么可能的是，由于你的尾随元素是浮动和内联的，你可能会遇到错误，尤其是IE7。很多时候，浮动规则将被传递给您从未想过或认为会被传递给的元素。最后清算可确保不会发生这种情况。

如何在IE 7中正确清除？

2 个答案: