響應式3列網格佈局留下開放空間

Question

我正在用縮略圖網格構建響應式組合網站。它取決於瀏覽器的寬度，從單列網格到三列網格。

該問題僅出現在三列網格中。當我調整瀏覽器的大小時，網格有時會跳過兩個縮略圖並留下空白區域。縮略圖網格進一步推這樣的：

現在，這只是有時會發生。當我調整瀏覽器大小時，我可以看到它從正常網格切換到錯誤網格並返回（至少在Chrome和Safari中，Firefox在調整大小時總是顯示錯誤）。

這是我的html /縮略圖div的css。

HTML

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

CSS

.thumbnails div{ 
    width: 33.33333%; 
} 

我所有的元素都具有盒大小：邊界盒;在他們。我希望我沒有遺漏任何其他相關信息。我以前沒有遇到過這個特殊的問題。也許我忽略了一些明顯的東西，但任何幫助將不勝感激！

Answer 1

對於因爲據我所知，這可以修復它

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

如果div的一排中的一個不具有相同的高度，因爲你需要clear: left;下一行的第一個的人。