【问题标题】：Floated list items with unwanted vertical gap具有不需要的垂直间隙的浮动列表项
【发布时间】：2013-11-23 05:32:17
【问题描述】：

上下文：

我有六个左浮动列表项（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 修复程序来防止浮动列表项在第二行中扭曲？只要它有效，修复就不必非常漂亮或出色。

【问题讨论】：

清除第四项。
@j08691 ：很好的解决方案，它响应迅速。为什么不添加您的解决方案作为答案？另外，感谢您的编辑。

标签： jquery css list css-float

【解决方案1】：

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

您可以切换到使用display: inline-block 而不是float: left：

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

每一行中项目的顶部总是对齐，如果每行有不同数量的元素（例如通过媒体查询），这种技术将继续有效。

【讨论】：

谢谢。使用 display 代替 float 有效（与代码所暗示的 margin-right 的减少结合使用）。
我选择了 j08691 的答案，因为它需要减少一次编辑（我知道这很简单），并且不需要调整边距。另一方面，如果我要请求额外的列表项行，您的解决方案的优势在于它只需要应用一次，而 j08691 的解决方案需要应用于第四个、第八个、第十二个等列表项。考虑到我没有在我的问题中将此规定为要求（确实如此），我选择了 j08691 的答案。
没问题，两种解决方案都适合您。如果您有更多元素，您可以使用li:nth-child(3n+4) 将clear: both 应用于所需的项目。
经过测试和确认。非常光滑。谢谢。
我被告知 inline-block 与 margin-right 结合可能会在某些浏览器中出现错误，而是将每三个列表项包装在一个 div 中（例如div.list-float-fix），如下所示CSS：.list-float-fix:before, .list-float-fix:after {content: ""; display: table;} .list-float-fix:after {clear: both;}.

【解决方案2】：

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

【讨论】：

请看我对三十点的回复。