html - 同位素侧边界

我正在使用具有同位素过滤器库的插件，我将宽度设置为33.33％，因此我的列表元素分为3列。我想选择中间一个以设置侧边框，但是当我单击过滤器时，元素将按位置向左移动。这意味着我原来的CSS :nth-child(3n+2)将不再正确。关于为什么我总是可以选择中间项目的任何建议，因为HTML保持不变？

非常感谢。

最佳答案

刚开始使用同位素在砖石结构中使用时，我为此付出了很多努力，因此，我对此绝对表示同情！

事实证明，在同位素/砌体布局中，网格项目之间的垂直间距称为装订线，您根本不需要使用左右边距。

这是一个例子：

假设您有一个由9个项目组成的网格，并且希望它是三列，每个项目之间的间隔为2％。做到这一点的一种好方法是在HTML中设置一些“参考元素”，这些元素将用作我们的网格项目大小和装订线大小的模板。和我在一起HTML如下：

<div id="grid">

    <div class="item-sizer"></div>
    <div class="gutter-sizer"></div>

    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>
    <div class="grid-item"></div>

</div>

然后，我们要针对的是CSS中的前两个“大小调整器”元素，并设置一些宽度。最终，当我们初始化同位素时，Javascript将读取此内容。这是CSS：

.item-sizer {
    width: 32%;
}

.gutter-sizer {
    width: 2%;
}

/* note that this is the same as the .item-sizer */
.grid-item {
    width: 32%;
}

.item-sizer用作模板以显示布局中的宽列。 .gutter-sizer用作装订线宽度的模板。

一些数学计算出这些数字：

在3列布局中，您将有两个垂直间隙。这些差距中的每一个都会是2％（因为这是我们决定希望差距的大小），因此2％* 2差距=差距所占的总空间为4％。如果采用网格的整个宽度（100％），然后减去我们的总间隙空间（4％），则剩下的96％可以均匀地分布到网格项目中。 96％/ 3列各占32％！

然后，您必须调整Isotope调用以引用这些CSS选择器来相应地调整网格和装订线的大小：

$('#grid').isotope({

    // set itemSelector so .item-sizer and .gutter-sizer are not mistaken for grid items:
    itemSelector: '.grid-item',
    percentPosition: true,
    masonry: {
        // tell the layout to use the items we set up as sizing templates:
        columnWidth: '.item-sizer',
        gutter: '.gutter-sizer'
    }

});

关于html - 同位素侧边界，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/48577651/