Question

获取的第一行和第二行将具有“案例研究-大”类（宽度为50％）。第二，第三和第四级将进行“案例研究”类（宽度为33％），然后再返回到两个大型类，依此类推...

要应用此功能，我正在使用以下逻辑运行for循环：

    <?php
       $casesize = "case-card";
       for ($counter = 1; $counter < 100; $counter++ ) {
           if ($counter % 2 == 0) {
                $casesize = "case-card--large";
         }  
       }
    ?>

但是，我所有的div都使用“大写卡片式”样式（宽度为50％）吗？如果我将代码调整为以下内容：

    <?php
       for ($counter = 1; $counter < 100; $counter++ ) {
           if ($counter % 2 == 0) {
               $casesize = "case-card--large";
         } else {
               $casesize = "case-card"; 
           }
       }
    ?>

所有div现在都具有“ case-card”样式了吗？不确定为什么会这样吗？

我希望它看起来像这样：

   | Large | Large |
|Small | Small | Small |
   | Large | Large |
         ...

HTML和CSS：

.wrapper {
  font-size: initial;
  margin-top: 20%;
}

.case-card--large {
  width: 50%;
  float: right;
  border: 1px solid blue;
}

.case-card {
  text-align: center;
  padding: 40px;
  width: calc(100% / 3);
  display: inline-block;
  float: left;
  height: 393px;
  border: 1px solid red;
}

<div class="<?php echo $casesize;?>" ?>
  <div class="wrapper">
  <p>Dummy text</p>
  </div>
</div>

Answer 1

您正在修改循环中的值，因此如果要再次测试，则必须放回它：

<?php
    for ($counter = 1; $counter < 100; $counter++ ) {
        $casesize = "case-card";
        if ($counter % 2 == 0) {
            $casesize = "case-card--large";
        }
        // Do something with casesize
    }
?>

Answer 2

您正在循环外使用$ casesize var。在循环内尝试

替换此：

<div class="<?php echo $casesize;?>" ?>
  <div class="wrapper">
  <p>Dummy text</p>
  </div>
</div>

与此：

    <?php
    for ($counter = 1; $counter < 100; $counter++ ) {
        echo '<div class="';
        if ($counter % 2 == 0) {
            echo 'case-card--large';
        } else {
            echo 'case-card';
        }
        echo '"><div class="wrapper"><p>Dummy Text</p></div></div>';
    }
    ?>

Answer 3

为什么不只使用纯CSS？

.class:nth-child(4), .class:nth-child(5) {
    /** your css code **/
}

ref：https://developer.mozilla.org/en-US/docs/Web/CSS/:nth-child

Answer 4

您可以使用:nth-child()伪类在完整CSS 中进行此操作：

// Large
.yourclass {
    // Default styling
}

// Small
.yourclass:nth-child(5n+3), .yourclass:nth-child(5n+4), .yourclass:nth-child(5n+5) {
    // Specific styling for "small" elements
}

测试nth-child选择器的有用资源：nth tester。
nth-选择器很多，请参见pseudo-classes

对于第4和第5个元素，请将此类应用于HTML

4 个答案: