如何浮動不同高度的div？

Question

我想達到的目標：

我目前得到：（第二個框有攪亂整個佈局一個額外的列表項）

HTML：

<div id="categories"> 
    <div class="cat"> cat1 </div> 
    <div class="cat"> cat2 </div> 
    <div class="cat"> cat3 </div> 
    <div class="cat"> cat4 </div> 
    <div class="cat"> cat5 </div> 
    <div class="cat"> cat6 </div> 
    <div class="cat"> cat7 </div> 
    <div class="cat"> cat8 </div> 
    <div class="cat"> cat9 </div> 
    <div class="cat"> cat10 </div> 
</div> 

一個解決方案是將五個項目分組到一個新的div中，並應用clear:left，但由於php代碼的工作原因，我無法做到這一點。

Answer 1

我這樣做了很多，並不斷回來這個參考：

http://css-tricks.com/snippets/css/cross-browser-inline-block/

我認爲這將幫助你實現你以後。

Answer 2

你不只是顯示所有的div的行內塊？

Answer 3

小提琴 http://jsfiddle.net/c4urself/gCEDV/

HTML

<div id="categories"> 
    <div class="cat cat1 square"> cat1 </div> 
    <div class="cat cat2 square"> cat2 </div> 
    <div class="cat cat3 tall"> cat3 </div> 
    <div class="cat cat4 square"> cat4 </div> 
    <div class="cat cat5 long"> cat5 </div> 
    <div class="cat cat6 tall"> cat6 </div> 
    <div class="cat cat7 square"> cat7 </div> 
</div> 

CSS

body { 
    background-color: #ccc; 
} 
div.cat { 
    background-color: #fff; 
    float: left; 
    margin-left: 5px; 
    border: 1px solid green; 
    margin-bottom: 5px; 
} 
#categories { 
    width: 230px; 
} 
.square { 
    width: 50px; 
    height: 50px; 
} 
.long { 
    width: 100px; 
    height: 50px; 
} 
.tall { 
    height: 100px; 
    width: 50px; 
} 

Answer 4

真的不知道爲什麼你不能這樣做了明確的離開是由於怎樣的PHP代碼作品。

<?php 
$i = 0; 
foreach ($cats as $cat) { 
    echo '<div class="cat"> cat '. $i .' </div>'; 
    if ($i%5 == 0) { 
    echo '<div style="clear: left;"></div>'; 
    } 
    $i++ 
} 
?> 

否則非PHP的解決辦法是isotope或masonry。

Answer 5

您可能會爲每個容器的高度而努力，因爲它會被設置爲任何內部容器的高度。之後，如果高度很重要，並且框中沒有足夠的內容來展開它們，則可以使用類似jQuery的元素來抓取元素，以便爲每個div容器操作DOM。

就水平間距而言，這些元素中的每一個都可以共享一個具有相同填充的CSS類？

如果每個容器都有明確的寬度並且父容器具有明確的寬度，則可以實現塊5。