浮动的div，像对待行

Question

我有类似：

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

我设置的容器明确修复和浮动的div容器内，就像这样：

但是，当我有一个div中的额外文本，我想像它推动其他divs，如果他们像一排，像这样：

相反，因为花车的，我得到更多的东西是这样的：

我只是想知道，以去了解这一点的最好办法。我可以把一个包装围绕每一个“行”，如：

<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

OOOh！地铁瓷砖:)

这可能是一个旧的（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

，把下面：

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

Answer 4

一个纯CSS的方法是使用nth-child选择清除所有的第三格：

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

这将无法工作在旧版本的IE，但是。

Answer 5

你可以尝试在每行div之间使用像下面这样清晰的类。但是，这并不总是适用于旧版浏览器。按照我的看法，你对排班做的事情是最好的做法。

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