css - Chrome上的CSS列计数无法正确运行

在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首先使用过滤器。也许有人遇到同样的问题？

并且请不要写使用插件。

最佳答案

您会考虑改用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>

关于css - Chrome上的CSS列计数无法正确运行，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/46835350/