2013-10-09 119 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来做到这一点。