元素不能浮动在前一行太高的第一个元素之下

Question

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

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

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 而不是浮动它们来解决问题。

Elements can't float below the previous row's too tall first element