CSS列计数导致项目拆分列

本文介绍了CSS列计数导致项目拆分列的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！ 问题描述

尝试不使用jQuery脚本来实现砌筑效果，因此请使用CSS作为替代方案.

Trying to not use a jQuery script for a masonry effect so looking to CSS for alternatives.

我正在尝试使用列计数，该列似乎正在运行，但未达到预期的水平.

I am trying to use column count, which appears to be working but not as expected.

所以这些列在那里，但是有时您会在此示例中看到，容器中的项目有时会被拆分成多个:

So the columns are there, but sometimes the items in the container are being split across more than one as you should be able to see in this example:

jsfiddle/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%; }

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

I am using pagination for the items from a database, and sometimes everything works fine but others it doesn't.

关于为什么/我在做什么错的任何逻辑?

Any logic as to why / what im doing wrong?

推荐答案

我认为这是您需要的

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