Chrome 上的 CSS 列计数无法正常工作

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>