0

我一直在做简单的 .isotope 画廊，这就是在 chrome 开发工具中使用选定的#portfolio-wrap 容器的外观：

我无法上传三个链接，所以您必须返回此处：
--> 图库 - 检查图片 1 <--

每个 .isotope 对象（带有文本的圆圈）都有

margin: 0 10px 0 10px;

就像屏幕上的：

--> 现在检查图像 2 <--

该行中有四个对象。我想要的是第一个和第四个项目的左侧和右侧没有边距，以便每个人都粘在父体容器的“墙壁”上。 编辑：
每个项目都应该有 20px 的下边距，除了 1、5、9 或换句话说 4n+1 之外的每个项目也应该有 20px 的左边距。所以他们会很好地堆叠。图片

所以我尝试过nth-child：

#portfolio-wrap > div:nth-child(4n+1)  {
    margin: 0 0 20px 0;
}

但它使同位素行为变得错误，如下所示。红色数字是连续的子数字，因为它们应该根据代码出现而无需过滤：

--> 现在检查图像 3 <--

第一个和第五个孩子的边距应用得很好。如果不是两件事，一切都会好起来的：

  1. 过滤后应用的边距没有变化。
  2. 位置错误，如最后一个 imgur 链接。

广告。1
我找到了一个解决一个问题的 js 解决方案，它对我部分有效：Stackoverflow - 单击当我应用 4n+1 代码时它不起作用，有什么问题？（我对js真的不是很好）

var x=0;
$('.portfolio-item:not(.isotope-hidden)').each(function(){
     for (x=4*x+1; x<=50; x++ ) { 
        $(this).css('margin','0 0 20px 0') 
     } else {
        $(this).css('margin','0 0 20px 20px')
     }
})

广告。2
我不知道是什么导致了对齐错误。我认为这可能是太多的边距破坏了包装器，但事实并非如此。

为大家更新：

I have fixed my js and it works!:

$('.portfolio-item:not(.isotope-hidden)').each(function()) {
        for (x = 1; x <= 50; ++x) { 
        if ((x - 1) % 4 == 0) {
            $(this).css('margin','0 0 20px 0') 
        } else { 
                $(this).css('margin','0 0 20px 20px')  
        } 
    }}

Layout bug is still bugging as on image3!

Also js after filtering is not applying new margin... :(

Update 2:

I have resolved the problem by applying gutterWidth (see isotope manuals) also you not only need apply gutterwidth but also long stack of code from demo of gutterwidth from source. Shame on you isotope documentation.

4

1 回答 1

1

In order to target every first and forth child element for each row of 4 elements leaving the first without left margin and the 4th without right margin you should use the following rules (based on the classes you mentioned in your question....)

#portfolio-wrap > div:nth-child(4n+1)  {
    margin-left: 0px;

}
#portfolio-wrap > div:nth-child(4n+4)  {
    margin-right: 0px;
}

Broken lay-out

Not sure without taking a look to your code. But it seams that #5 is floating right , #3 cant find his place and goes down as it is supposed to happen with a floating element. It does not reach the left of the container because it finds place after #1 which is using a bottom margin of 20px. Lastly #4 finds its place below #3 and it can reach the left side of the container. So what you see is the expected layout as the Visual formatting model says.

javascript function

Take a look there as well. An else statement should follow an if.

于 2013-05-16T17:07:34.287 回答