同位素砌体布局模式的列特定样式

Question

我有一个砖石布局的同位素画廊：

JS:

$('.grid').isotope({
    itemSelector: '.grid-item',
    layoutMode: 'masonry'
});

CSS:

.grid-item {
    width: 50%;
}

这基本上将图库分成两列。有没有办法在案例中添加第一列/第二列的特定样式？ IE。我希望第一列中的所有图像都具有绿色边框，而第二列中的图像具有红色边框。提前致谢！

Answer 1

假设 .grid 元素的子元素的顺序将保持不变，您可以通过为 .grid className 应用 CSS 选择器来解决此问题，如下所示：

.grid > div:nth-of-type(odd) { 
    border: 1px solid green; 
}

.grid > div:nth-of-type(even) { 
    border: 1px solid red; 
}

请注意，我为 nth-of-type 使用 odd 和 even 值以获得理想的结果。

Answer 2

似乎可以使用 CSS:

设置第一列元素的样式

.grid-item[style*="left: 0;"] {
    border-color: green;
}

认为左列项目的左属性设置为 0。

Column specific styles for Isotope masonry layout mode