css - 如何在每个 2 列/1 行视图中显示每 4 个 LI 后设置 LI 样式？

Question

所以我有一个博客布局（主题），它在一行中显示 2 列中的文章，每篇文章都是 UL 中的 LI。

然后我有这个 CSS 代码，它基本上margin-top: 20px;从第三个开始添加到每个 LI（所以它不会在第一行添加边距并在它们和标题之间留下空白空间），它还添加clear: both;到每 2 个 LI（首先每行的 LI）。

.module-row.two-cols ul li:nth-child(n+3) {
    margin-top: 20px;
} 
.module-row.two-cols ul li:nth-child(2n+1) {
    clear: both;
}

代码是：

<div class="content-wrap module-row two-cols clearfix">
 <ul>
   <?php while (have_posts()): the_post(); ?>  
   <li class="col-sm-6">
     <div class="item content-out co-type1">
       <?php get_template('article-column');?>
     </div>
   </li>
   <?php endwhile; ?>
 </ul>
</div>

当我尝试在每 4 个 LI 之后插入一个广告 LI 时，我的问题从 CSS 开始 - 所以它基本上会在每 2 行/4 列之后显示一个广告。有没有办法更改 CSS，以便我可以正确插入该广告并保持当前的 CSS 逻辑（上边距和清晰）？此外，广告 LI 将使用 col-sm-12 类（全宽）的广告。

所以我想要这个，如果可能的话，用 CSS

基本上在每第四个 col-sm-6 LI 之后通过 PHP 代码插入另一个类 col-sm-12 的 LI。谢谢！

我可以在 PHP 中执行此操作，更改主题的逻辑并在那里进行计数，而不是通过 CSS，但我想知道是否可以通过 CSS 来完成，因为我希望最好不要更改主题，只更改 CSS。“破解”它并通过 PHP 而不是 CSS 来完成它看起来像这样 - 所以这是我在 CSS 中想要的逻辑：

margin-top在第 3 个 LI 之后的所有 LI 中添加 a ，clear: both从第一个 LI 开始从每 2 到 2个 LI 中添加 a，margin-top并clear: both在每个第 5 个 LI 中添加 和 。

标签： css

Answer 1

这是一个可能的解决方案。这个想法是，在模运算的帮助下，您可以定位第三个while循环，第6个，第9个等等。我不是 php 开发人员，所以我希望我希望这里没有语法错误，如果有人指出我，我将不胜感激！:)

编辑：做了一个快速修复

编辑：HTML 结构不正确，但我不知道您想在最终结果中使用 li 和 div 实现什么，所以我按照您在问题中编写的方式保留了它。

<div class="content-wrap module-row two-cols clearfix">
 <ul>
   <?php $counter = 0 ?>
   <?php while (have_posts()): the_post(); ?>
    <?php if ($counter % 3 == 0){
         <div class="col">
       // code for your ad here
         </div>
    <?php } else {?>
   <li class="col-sm-6">
     <div class="item content-out co-type1">
       <?php get_template( 'row' );?>
     </div>
   </li>
    <?php } ?>
    <?php $counter = $counter + 1 ?>
   <?php endwhile; ?>
 </ul>
</div>