浮动div，像行一样对待

Question

我有类似的东西：

<div id="container">
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
<div></div>
</div>

我已将容器设置为明确的修复并将div放在容器内，如下所示：

然而，当我在div中添加其他文本时，我喜欢它将其他div推下来就好像它们是一行一样，如下所示：

相反，由于花车，我得到更像这样的东西：

我只是想知道最好的方法。我可以在每个“行”周围放置一个包装器，例如：

<div id="container">
    <div class="row">
    <div></div>
    <div></div>
    <div></div>
    </div>
    <div class="row">
    <div></div>
    <div></div>
    <div></div>
    </div>
    div class="row">
    <div></div>
    <div></div>
    <div></div>
    </div>
</div>

但这似乎是很多额外的非语义div ...如果我动态生成div（通过cms中的列表视图），那么我必须添加额外的代码来计算每三个的倍数的div ...

Answer 1

哦！ Metro Tiles：）

这可能是一个旧的（3岁）帖子，但仍然很好地解释了如何一致地跨浏览器进行浮动高度。

http://blog.mozilla.com/webdev/2009/02/20/cross-browser-inline-block/

Answer 2

尝试这样的事情：

<div id="container">
    <div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div class="clear"></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div class="clear"></div>
</div>
<div class="row">
    <div></div>
    <div></div>
    <div></div>
    <div class="clear"></div>
</div>

然后在你的css文件中：

.clear {
    clear: both;
 }

Answer 3

一种纯CSS方法是使用nth-child选择器清除每个第三个div：

<style type="text/css">
#container div:nth-child(3n+1) {
  clear:left;
}
<style>

然而，这在旧版本的IE中不起作用。

Answer 4

您可以尝试在每行div之间使用如下所示的明确类。但是，这并不总是适用于旧浏览器。你所做的关于行类的是我认为的最佳实践。

.clear
 {
   display:block;
   float:left;
   width:100%;
   clear:both;
   height:1px;
  }

Answer 5

如果您想要新行，请输入以下内容：

<br style="clear: both; height: 0;" />