CSS 3 Column Divs循環

我有一個drupal視圖，它提取項目屏幕截圖並將它們放入div中，我想知道是否有一種聰明的方法在CSS中將它們排成一列，並且沒有邊距單獨設計每個盒子的樣式。CSS 3 Column Divs循環

第一排的風格很容易，因爲我可以給DIV-即使左，右頁邊距，但隨後第2行我需要給DIV奇保證金和偶數的div無餘量

我創建了一個J擺弄我在哪裏的樣機。我可以風格的第一個和最後一個div類，也給一個規則奇數和偶數，但因爲我不知道如何項目屏幕截圖他們會我不喜歡每個div盒個別風格

http://jsfiddle.net/eGWY6/

來源

2012-08-17 user1606612

你能不能給你想要如何生成的HTML看一些指示？圖形應該沒問題，對你想要應用於奇數甚至是類的規則有一些解釋。 – 2012-08-17 11:06:31

你想要這個http://jsfiddle.net/eGWY6/3/ – 2012-08-17 11:07:12

你可以解決這個問題是這樣的：

的jQuery：

// Remove margin on third project screen shot 
if($("#projects-wrapper div").length){ 
    $("#projects-wrapper div").each(function(i){ 
    var remainder = (i + 1) % 3; //3th change to your needs 
    if(remainder === 0){ 
     $(this).addClass("last"); 
    } 
    }); 
}

CSS：

.last {margin-right: 0;}

來源

2012-08-17 11:03:06 Mark

雖然這可能是必要的方法，但值得一提的是任何提及[tag：jquery]標籤的完全缺失（當然還有寫作）。 – 2012-08-17 11:05:11

它的Drupal，其默認包含 – Mark 2012-08-17 11:08:24

非常感謝這個，我花了很多時間纔開始工作，因爲我沒有意識到drupal 7中的行爲！ – user1606612 2012-08-17 13:34:08

嘿，現在定義的CSS像這樣

.view-last{ 
margin-right:0; 
} 
.view-4{ 
margin-left:0; 
}

demo

來源

2012-08-17 11:11:08

看看這個小提琴，我認爲這是你在找什麼。如果你以百分比給寬度，然後它會很容易放置它們。

http://jsfiddle.net/eGWY6/7/

現在你可以命名奇數交替的div，甚至和他們的風格..就這麼簡單

來源

2012-08-17 11:12:27

CSS 3 Column Divs循環

回答

相關問題