CSS 导致项目拆分列的列数

Question

尝试不使用 jQuery 脚本来实现砌体效果，因此正在寻找 CSS 替代方案。

我正在尝试使用列计数，它似乎有效但未达到预期效果。

所以列在那里，但有时容器中的项目被拆分为多个，您应该能够在本例中看到：

#builds {
  width: 100%;
}
.cols {
  -moz-column-count:4;
  -moz-column-gap: 3%;
  -moz-column-width: 25%;
  -webkit-column-count:4;
  -webkit-column-gap: 3%;
  -webkit-column-width: 25%;
  column-count: 4;
  column-gap: 3%;
  column-width: 25%;
}
.item {
  height: auto;
  width: 100%;
}

我对数据库中的项目使用分页，有时一切正常，但其他情况下却不行。

关于为什么/我做错了什么有什么逻辑吗？

Answer 1

我觉得this是你需要的

.items {
  -webkit-column-break-inside: avoid;
  -o-column-break-inside: avoid;
  -moz-column-break-inside: avoid;
  break-inside: avoid;
}

CSS 导致项目拆分列的列数

CSS column count causing items to split columns

css

masonry