CSS column count causing items to split columns

问题:

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?

回答1:

I think this is that you need

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