css - 元素不能 float 在前一行太高的第一个元素下方

Question

我有一个宽度约为 33% 的 float 元素列表，因此每行 3 个元素。他们的高度不一。另外，我使用的是 Javascript 排序插件，无法使用 CSS 属性。

问题:如果给定行的第一个元素比其他元素高，那么下一行的第一个元素不能 float 在它下面。如何解决？

CSS:

.resource_item {
    float: left;
    width: 31%; 
    margin-bottom: 30px;    
    padding-left: 1%;
    padding-right: 1%;
}

PHP:

while ...

    ?>
    <div class='resource_item'>
        Content
    </div>
    <?php

endwhile;

Answer 1

正如评论所指出的(该人出于某种原因将其删除)通过将元素设置为 display: inline-block 而不是 float 它们来解决问题。