Responsive 3-column grid layout leaves open spaces

寵の児 提交于 2021-02-11 15:26:41

问题


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:

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).

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%;
}

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!


回答1:


For as far as i know this could fix it

.thumbnails div:nth-child(3n + 4){
   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.



来源:https://stackoverflow.com/questions/32058493/responsive-3-column-grid-layout-leaves-open-spaces

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!