如何使用模数与PHP添加一个CSS类的图像网格取决于两种不同的模式 - How to use modulus with PHP to add a CSS class to a grid of images depending on two different patterns?

How to use modulus with PHP to add a CSS class to a grid of images depending on two different patterns?

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

情况1
我想应用一个CSS类，以*表示的所有中间图像。我不能简单地使用n -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类到*表示的网格中的图像。出于同样的原因，我也不能使用n -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>

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

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

可以重写为

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

然而，你可以在css中使用nth-child选择器(IE9+):

情况1:

:nth-child(3n+2)

情况2:

:nth-child(2n+2)