响应式 3 列网格布局留有开放空间

Question

我正在构建一个带有缩略图网格的响应式投资组合网站。根据浏览器的宽度，它从一列网格到三列网格。

问题仅出现在三列网格中。当我调整浏览器大小时，有时网格会跳过两个缩略图并留下一个空 space。缩略图在网格中被推得更远，如下所示：

现在，这只是偶尔发生。当我调整浏览器大小时，我可以看到它从正常网格切换到错误网格并返回（至少在 Chrome 和 Safari 中，Firefox 在调整大小时总是显示错误）。

这是我的 html/css 缩略图 div。

HTML

<div class="thumbnails">
    <div>*image*</div>
    <div>*image*</div>
    <div>*image*</div>
<div>

CSS

.thumbnails div{
    width: 33.33333%;
}

我所有的元素都有 box-sizing: border-box;在他们。我希望我没有遗漏任何其他相关信息。我以前没有遇到过这个特殊问题。也许我忽略了一些明显的东西，但我们将不胜感激！

Answer 1

据我所知这可以解决问题

.thumbnails div:nth-child(3n + 4){
   clear: left;
}

如果一排 div 中的一个与其他人的高度不同，您需要 clear: left; 下一行的第一个。