同位素布局问题

Question

我正在这个网站上工作：

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

当我创建缩略图时，一切都很好，但出于某种原因，如果您向右滚动，它会添加所有这些额外的东西 space。 window 中的一切都按照它应有的方式工作，它从来没有让我向右滚动，所以我忽略了额外的 space.

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.有些东西将内容集中到所有额外的 space。而且我对jquery不够熟悉，无法确定问题出在哪里。

这里是一个没有同位素的例子：

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

关于如何解决这个问题有什么想法吗？

Answer 1

查看您的网站后，我注意到您在 gallery 元素上设置了一个巨大的 padding 大小。

目前是：

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

我已将其更改为 padding: 0; 并删除了右侧多余的 space。

.gallery 现在应该是这样的：

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

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

例如

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

同位素布局问题

Isotope troubles with layout

html

javascript

css

jquery

jquery-isotope