CSS列计数导致项目拆分列 [英] CSS column count causing items to split columns

问题描述

尝试不使用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:

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

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

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

这篇关于CSS列计数导致项目拆分列的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！