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