Chrome瀏覽器的列數不能正常工作

Question

Chrome上有一些錯誤。 （列數1或2沒關係，但3,4,5等不起作用）

.minmin-masonry-content { 
    -webkit-column-count: 3; 
    column-count: 3; 
    -webkit-column-gap: 1.5rem; 
    column-gap: 1.5rem; 
    opacity: 1; 
} 

我搜索很多，但沒有什麼幫助。

-webkit-column-break-inside: avoid; 
-webkit-backface-visibility: hidden; 

這裏的例子：DEMO它首先帶有過濾器。也許有人有同樣的問題？

並且請勿寫入使用插件。

Answer 1

你會考慮使用Flex嗎？

.container { 
 
    display: flex; 
 
    flex-wrap: wrap; 
 
} 
 

 
.container div { 
 
    flex-basis: 19%; 
 
    margin: 0.5%; 
 
} 
 

 
.container div img { 
 
}

<div class="container"> 
 
<div> 
 
    <img src="//www.fillmurray.com/300/400" width="100%"> 
 
</div> 
 
    
 
<div> 
 
    <img src="//www.fillmurray.com/300/400" width="100%"> 
 
</div> 
 
    
 
<div> 
 
    <img src="//www.fillmurray.com/300/400" width="100%"> 
 
</div> 
 
    
 
<div> 
 
    <img src="//www.fillmurray.com/300/400" width="100%"> 
 
</div> 
 
    
 
<div> 
 
    <img src="//www.fillmurray.com/300/400" width="100%"> 
 
</div> 
 
    
 
    
 
<div> 
 
    <img src="//www.fillmurray.com/300/400" width="100%"> 
 
</div> 
 
    
 
    
 
<div> 
 
    <img src="//www.fillmurray.com/300/400" width="100%"> 
 
</div> 
 
    
 
</div>