列特定風格

我有一個磚石佈局同位素畫廊：列特定風格

JS：

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

CSS：

.grid-item { 
    width: 50%; 
}

這基本上將畫廊分爲兩列。有什麼方法可以在案例中添加第一/第二列特定樣式？即我希望第一列的所有圖像都有綠色的邊框，第二列的圖像是紅色的。提前致謝！

來源

2017-07-14 sdvnksv

我不認爲這會工作，所有的情況，但你可以嘗試使用'.grid-item：nth-child（偶數）{border-color：red}'。如果這還不夠，您需要使用JS遍歷每個項目並檢查其左偏移量以確定它是在左列還是右列，然後添加一個類。 –

@TedWhitehead，奇數/偶數不起作用，你是對的（畢竟這是一個mansory佈局）。似乎它只剩下JS了！ – sdvnksv

是的，我認爲這是你最好的選擇。只要確保在每次砌體更新後重新運行JS; https://masonry.desandro.com/events.html#layoutcomplete –

假設.grid元素的子元素的順序將保持不變，您可以像下面爲.grid的className應用CSS選擇器解決這個問題：

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

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

請注意，我用odd和even值爲nth-of-type以獲得理想的結果。

來源

2017-07-14 20:08:08 Denialos

謝謝，但這是行不通的。否則，爲什麼我需要砌體佈局？ :-) – sdvnksv

是的，你是對的。也許有一種方法可以爲每個砌體元素添加自定義className，具體取決於某些條件？就像，如果你的塊有一個零「左」的座標，它應該在第一列。這樣，它可以有一個特定的className。假設砌體更新這個調整大小，也可以用CSS乾淨的解決方案。我自己並不是砌體的大用戶，只是想知道這裏。 :) – Denialos

非常感謝，謝謝！ – sdvnksv

這似乎是可能的風格和CSS第一列元素：

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

採取的左欄項目有一個左屬性設置爲0

來源

2017-07-15 07:40:08 sdvnksv

回答

相關問題