CSS列计数导致项目拆分列

Question

尝试不使用jQuery脚本进行砌体效果，因此寻找CSS替代。

我正在尝试使用列计数，这似乎有效，但并不像预期的那样。

所以列在那里，但有时容器中的项目被分割成多个，正如您在本例中应该看到的那样：

http://jsfiddle.net/DTcHh/3858/

#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;
}