同位素问题与布局

Question

我在这个网站上工作：

http://www.thecarlossanchez.com/Test/thecarlossanchez/Galleries/stilltest.html

当我创建缩略图时，一切都很好，但由于某种原因，如果您向右滚动，它会增加所有这些额外的空间。一切都在窗口中按应有的方式运行，它从来没有让我向右滚动，所以我忽略了额外的空间。

Now I am adding Isotope in order to filter the content, but when a category is selected all the thumbnails drop down and to the right.有些东西将内容集中到所有额外的空间。而且我对 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;
}

此外，如果您想在调整页面大小时将您的画廊居中，请将margin: 0 auto 添加到.gallery 元素。

例如

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