Php 浮动div，将其视为行

我有点像：

<div id="container">
<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 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>

但是，当我在一个div中有额外的文本时，我会希望它将其他div向下推，就像它们是一行一样，如下所示：

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

相反，由于浮动，我得到了更像这样的东西：

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

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

div class=“行”>

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

ooh！地铁瓷砖：）

这可能是一篇很老的（3年前）文章，但仍然很好地解释了如何在浏览器间一致地执行浮动高度

---

试试这样的方法：

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

---

在需要新行的位置，放置以下内容：

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

一种纯粹的CSS方法是使用选择器清除每三个div：

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

#容器分区：第n个子（3n+1）{
清除：左；
}

---

但是，这在旧版本的IE中不起作用。

您可以尝试在每行div之间使用如下所示的clear类。但是，这并不总是适用于较旧的浏览器。在我看来，你对row课程所做的是最好的实践

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

---

请对当前的情况做一个解释。谢谢你反对任何javascript吗？你必须看到：谢谢！我刚刚看到了这一点，打算删除这个问题……但我会打勾。哦，很好，那么它就不必是一个列表了？