带有不需要的垂直间隙的浮动列表项

Question

上下文：

我有六个左浮动列表项（2行x 3列）。

每个列表项都包含几个div。

问题：

列表项的垂直高度各不相同。当同一行的列表项的垂直高度不相等时，它会扭曲下一行中列表项的浮动。

实例：

链接：http://alethemes.com/orquidea/our-team/

要重现此问题，请在第一个列表项中的文本（.workerdescr）中添加一行。

这可以使用Firebug（或任何其他浏览器的代码检查器）快速完成。

我尝试了什么：

首先，我尝试在每行列表项周围包装div，但它会扭曲下一行列表项的浮点数。

其次，我尝试使用jQuery来平衡高度。它一直工作，直到我手动调整浏览器宽度。问题再次出现在特定的浏览器宽度上（如果只是几个像素，但仍然会出现）。

//Applied for when document ready and when browser resizes:
var contentHeight = $('.heightfix_listitem1').height();
$('.heightfix_listitem2, .heightfix_listitem3').css('height', contentHeight + "px");

问题：

有没有人有一个简洁的HTML / CSS / jQuery修复程序，可以防止浮动的列表项在第二行扭曲？只要它有效，修复就不必是漂亮或辉煌的。

Answer 1

有几种不同的方法可以解决这个问题。

您可以切换为使用display: inline-block代替float: left：

.teamlist li {
    width: 32%;
    margin-bottom: 50px;
    margin-right: 1%;
    display: inline-block;
    vertical-align: top;
}

每行中项目的顶部将始终排成一行，如果每行有不同数量的元素（例如通过媒体查询），此技术将继续有效。

Answer 2

一个选项，一个代码很少的选项，就是清除第四个项目（clear:both或clear:left）。