WordPress不对称网格

Question

我的客户正在为他们的WordPress博客请求以下网格。每4个帖子都是全宽的。我会用css nth selecter来做这件事吗？还是不是那么简单？

Answer 1

你可以使用css nth child，但更好的做法是使用你已经用来查询帖子的php循环上的计数器。使用模运算，您可以使用不同的css类区分每个第四项和其余项。 例如：

＆＃13;

＆＃13;

<div class="posts-grid">
      <?php 
        $counter=1; 
        $class=null; 
        $posts=g et_posts( 'numberposts=-1&order=ASC'); 
        foreach( $posts as $post ) :
          if ($counter % 4==0 ) { 
            $class= full-width; 
          } else { 
            $class= third-width; 
          } 
      ?>
        <div class="post-item <?php echo $class; ?>">
          ...
        </div>

      <?php $counter++; endforeach; ?>
</div>

＆＃13;

＆＃13;

＆＃13;