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

Question

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

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

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

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

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 与其他 div 的高度不同，您需要在下一行的第一个上使用 clear: left;。