同位素的布局问题

Question

我正在这个网站上工作：

当我创建缩略图时，一切工作都很好，但是由于某些原因，如果您向右滚动，它会添加所有这些额外的空间。 一切都按照在窗口中应有的方式工作，并且它从未使我向右滚动，因此我忽略了多余的空间。

现在，我添加了同位素以过滤内容，但是当选择类别时，所有缩略图都在右下方。 有些东西将内容集中在所有额外的空间上。 而且我对jquery还不太熟悉，无法弄清楚问题出在哪里。

这是无同位素的工作方式示例：

http://www.thecarlossanchez.com/Galleries/people.html

有想法该怎么解决这个吗？

Answer 1

在检查您的网站时，我注意到您在gallery元素上设置了巨大的padding尺寸。

目前是：

.gallery{
    width:80%; 
    padding:800px; /* enormous padding */
    position:relative;
}

我将其更改为padding: 0; 并删除右侧的多余空间。

.gallery现在应该看起来像这样：

.gallery{
    width:80%; 
    padding:0; 
    position:relative;
}

另外，如果要在调整页面大小时将图库居中，请向.gallery元素添加margin: 0 auto 。

例如

.gallery{
    width:80%; 
    padding:0;
    position:relative;
    margin: 0 auto; /* center gallery */
}