我如何修复这个破碎的CSS砌体?

时间:2016-08-27 02:01:14

标签: css

我正在修改一个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;
}

实时网址:http://labs.imvges.xyz/

此致 JQN

1 个答案:

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