2013-10-09 159 views
2

我創建了一個新聞部分,其中大多數帖子都是小型的,並且是成對的 - 您會在我製作的小型小提琴中看到 - 而一些(取決於在他們的日期)更大並佔據整個寬度。第n個孩子和第n個類型包括其他div

我的主要問題是大的職位似乎與邊界(這應該是在頂部和底部的干擾,有一個下降的中心

見例如:

http://jsfiddle.net/r9tLh/

* 編輯 *

我也剛剛意識到,如果有一個小哨自身接下來是一個大的帖子,下一篇文章會對選擇器做錯誤的一面做出正確的樣式,所以即使我修復了第n個選擇器,仍然可能會出現錯誤。有沒有其他方式可以做到這一點,比如在一個大郵件後重新開始的奇數和偶數選擇器?

.blogPost:nth-of-type(odd) { 
    border-left: 0; 
    padding-right: 0; 
} 
.blogPost:nth-of-type(even) { 
    padding-left: 0; 
    border-right: 1px solid #4E4E4E; 
} 
+0

我正在使用'n-type-type'作爲測試,在此之前它僅僅是第n個孩子,顯然仍然是不正確的。 – XstiX

+0

對不起,但你不清楚你在問什麼。 –

+0

@JoshC第二大帖子後的帖子由於包括大帖子在內的奇數和偶數選擇器而在其周圍有不正確的邊界。 – XstiX

回答

1

我用JavaScript按類專搶解決我目前的問題:

$(function() { 
$('.blogPost:odd').css({ 
       'border-left': '0', 
       'padding-right': '0' 
}); 
$('.blogPost:even').css({ 
       'border-right': '1px solid #4E4E4E', 
       'padding-left': '0' 
}); 
}); 

但是我上面提到的問題 - 如果只有一個前大後小的帖子,以下小帖子會遇到同樣的問題。如果我解決不了,我可能會提出一個新的問題。

感謝您的幫助讓我意識到我無法用CSS來做到這一點。