CSS column count causing items to split columns

2019-06-03 10:51发布

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?

标签: css css3 masonry
1条回答
ら.Afraid
2楼-- · 2019-06-03 11:32

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;
}
查看更多
登录 后发表回答