如何浮动不同高度的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。