响应式三列网格布局留有开放空间 [英] Responsive 3-column grid layout leaves open spaces

问题描述

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

I am building a responsive portfolio website with a grid of thumbnails. It goes from a one-column grid up to a three-column grid depending on the browser width.

仅在三列网格中会出现此问题.调整浏览器大小时，有时网格仅跳过两个缩略图并留出空白.像这样将缩略图进一步推入网格中:

The problem occurs only in the three-column grid. When I resize the browser, sometimes the grid just skips two thumbnails and leaves an empty space. The thumbnails are pushed further in the grid like this:

现在，这仅在某些情况下发生.调整浏览器大小时，我可以看到它从普通网格切换到错误网格，然后又回来(至少在Chrome和Safari中，Firefox在调整大小时始终显示错误).

Now, this only happens sometimes. When I'm resizing the browser I can see it switching from the normal grid to the error grid and back (at least in Chrome and Safari, Firefox always displays the error when resizing).

这是缩略图div的html/css.

Here is my html/css for the thumbnail divs.

HTML

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

CSS

.thumbnails div{
    width: 33.33333%;
}

我所有的元素都有框大小:border-box;在他们.我希望我不会遗漏任何其他相关信息.我以前没有遇到过这个特殊问题.也许我忽略了一些显而易见的事情，但任何帮助将不胜感激！

All of my elements have box-sizing: border-box; on them. I hope I didn't leave out any other relevant info. I haven't encountered this particular problem before. Maybe I'm overlooking something obvious, but any help would be appreciated!

推荐答案

据我所知，可以解决此问题

For as far as i know this could fix it

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

如果一行中的一个div与其他div的高度不同，则需要 clear:left; 在下一行的第一行中.

If one of the div's in a row does not have the same height as the others you need clear: left; on the first one of the next row.

这篇关于响应式三列网格布局留有开放空间的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！