我一直在做简单的。同位素图库，这是在chrome开发工具中选择的#portfolio-wrap容器的样子:

---

我不能上传三个链接所以你必须回到这里:
-->图库-检查图片1 <--

---

每个同位素对象(带文字的圆圈)都有

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
我不知道是什么导致了对齐错误。我认为这可能是太多的页边距破坏包装，但事实并非如此。

为所有人更新:

我已经修复了我的js和它的工作原理!:

$('.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')  
        } 
    }}

布局bug仍然在image3上bug !

过滤后的js也没有应用新的边距…(

<标题>更新2:

我已经通过应用gutterWidth(参见同位素手册)解决了这个问题，你不仅需要应用gutterWidth，还需要从源代码应用gutterWidth演示的长堆栈代码。你的同位素文件真可耻。

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