0

モジュラスを使用して、CSS クラスを 2 つの異なる状況で画像のグリッドに適用したいと考えています。

状況 1
* で示されるすべての中央の画像に CSS クラスを適用したいと考えています。グリッドに常に 9 つの画像があるかどうかわからないため、単純に nth-child を使用することはできません。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 も使用できません。サイトの幅が狭く、画像が 2 列あるため、メディア クエリを使用して、この状況で指定されたクラスに 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

モジュラスは、最初のオペランドを 2 番目のオペランドで割った余りであるため、この場合は次のものが必要になります。

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

そして、次のように書き換えることができます。

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

ただし、nth-childセレクター (IE9+)を使用して css で同じことを行うことができます。

状況 1:

:nth-child(3n+2)

状況 2:

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