Question

我正在使用一个WP插件，它利用Masonry.js在砖石网格中显示帖子。我正在显示两排三个大小均匀的“砖块”，需要每个“砖块”才能有另一种背景颜色。

http://i.imgur.com/4MjhuRq.jpg（我需要的例子）

我试图通过JS和CSS来实现这一点，但它没有发生。

任何人都可以提供最佳方式和工作示例吗？

由于

Answer 1

希望它会帮助你

    .yourclass{
    background:blue;
    width:30%;
    height:150px;
    display:inline-block;
  }
 .yourclass:nth-child(2n){

    background:red;
  }

在jquery中为ie8及以下

    $('.block:nth-child(2n)').css({'background-color':'red'});

工作示例http://jsfiddle.net/6Q9UA/12/

Answer 2

您可以使用css或jquery

的CSS：

.block:nth-child(even),.even{background-color:green}
.block:nth-child(odd),.odd{background-color:blue}

nth-child选择器与相应的奇数/偶数类配对，因此您可以使用相同的css属性。

jquery的：

$('.block:odd').addClass('odd');
$('.block:even').addClass('even');

做了一个小提琴：http://jsfiddle.net/filever10/6Q9UA/

我在小提琴中使用这两种方法，其中一种方法可以在现代浏览器中使用，但是如果你的目标是nth-child选择器无法使用的任何浏览器（例如＆lt; = ie8），那么jquery是一个简单的后备。

在石工网格上的交替背景颜色

2 个答案: