0

我想在两种不同的情况下使用模数将 CSS 类应用于图像网格：

情况 1
我想将 CSS 类应用于所有由 * 表示的中间图像。我不能简单地使用 nth-child，因为我不知道网格中是否总是有 9 个图像。有时可能有 5 个，有时是 7 个，有时是 8 个，等等……它是可变的。

[Img 1] [Img 2*] [Img 3] 
[Img 4] [Img 5*] [Img 6]
[Img 7] [Img 8*] [Img 9]

情况 2
我想再次将 CSS 类应用到由 * 指示的网格中的图像。出于与上述相同的原因，我也不能使用 nth-child 。我将通过媒体查询将 CSS 属性添加到在这种情况下给出的类中，因为站点的宽度较小，因此有两列图像。

[Img 1] [Img 2*]
[Img 3] [Img 4*]

到目前为止我的代码

if ($counter % 3 == 1) {
    $situation1 = TRUE;
} 
if ($counter % 3 == 0) {
    $situation2 = TRUE;
} 
$counter++;

<div <?php if($situation1) { post_class('situation1'); } if($situation2) { post_class('situation2'); }><img src="" /></div>
4

1 回答 1

1

模数是第一个操作数除以第二个操作数的余数，因此在您的情况下，您需要：

if ($counter % 3 === 2) {
    $situation1 = TRUE;
} 
if ($counter % 2 === 0) {
    $situation2 = TRUE;
}

您可以将其重写为：

$situation1 = ($counter % 3 === 2);
$situation2 = ($counter % 2 === 0);

但是，您可以使用nth-child选择器 (IE9+) 在 css 中执行相同操作：

情况一：

:nth-child(3n+2)

情况2：

:nth-child(2n+2)
于 2013-03-27T01:37:58.310 回答