浮動的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; 
    }