2

我正在创建一个新闻部分，其中大多数帖子都较小且成对出现-您将在我制作的小小提琴中看到-而有些（取决于它们的日期）较大并占据了整个宽度。

我的主要问题是大柱子似乎干扰了边界（应该在顶部和底部，有一个在中间。

参见示例：

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;
}
4

1 回答 1

1

我已经解决了我目前的问题，方法是使用 javascript 按类专门抓取：

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

然而我上面提到的问题——如果一个大帖子之前只有一个小帖子，那么下面的小帖子也会遇到同样的问题。如果我不能解决它，我可能会为此提出一个新问题。

感谢您的帮助，让我意识到仅使用 CSS 无法做到这一点。

于 2013-10-09T06:40:02.007 回答