html - 如何 float 不同高度的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/

我认为这将帮助您实现目标。