我正在修改一个pinterest克隆脚本,并正在用css砌体替换jquery砌体,我认为已经正确添加了css值,但是砌体仍然有点突破,你们可以看看让我知道我是什么可能做错了?
下面列出了使砌体工作的CSS,
代码:
#grid-container {
max-width:1200px;
-webkit-column-count: 4; /* Chrome, Safari, Opera */
-moz-column-count: 4; /* Firefox */
column-count: 4;
margin: 176px auto 0;
}
#grid-container > .post {
width: 290px;
margin: 0 5px 0;
position: relative;
display: block;
height: auto;
}
此致 JQN
答案 0 :(得分:0)
将列数设置为4将确保始终有4列,而不是根据明信片的宽度显示最大列数。请改用列宽。请参阅下面的更改和其他一些内容。
#grid-container {
max-width:1200px;
-moz-column-width: 288px;
-webkit-column-width: 288px;
column-width: 288px;
-moz-column-gap: 1em;
-webkit-column-gap: 1em;
column-gap: 1em;
margin: 176px auto 0;
}
#grid-container > .post {
width: 100%;
margin: 0 5px 0;
display: inline-block;
height: auto;
}