一行中每3列换行 - Wrap every 3 columns in a row

Wrap every 3 columns in a row

本文关键字：3列换行一行 | 更新日期: 2023-09-26

我想在一行中包装3列，然后在一行中再包装3列，以此类推。是模数运算符的问题还是别的什么?谢谢。

<?php if( have_rows('service') ): ?>
            <?php while ( have_rows('service') ) : the_row(); ?>
            <?php if($counter % 3 === 0) :    echo '<div class="row"'; endif; ?>
                        <div class="col grid_4_of_12 price-container team_member">
                            <span class="price"><?php the_sub_field('service_price'); ?></span>
                              <img src="<?php the_sub_field('service_image'); ?>" />
                              <h3 style="font-size:18px;" class="member_name"><?php the_sub_field('service_name'); ?></h3>
                              <p><?php the_sub_field('service_description'); ?></p>
                       </div>
                       <?php $counter++; if($counter % 3 === 0) :  echo '</div>'; endif; ?>
                <?php endwhile; ?>
            <?php else :  ?>
            <?php echo 'No Rows Found'; ?>
        <?php endif; ?>

第一个div似乎缺少右括号。改变…

<?php if($counter % 3 === 0) :    echo '<div class="row">'; endif; ?>

提示:在调试时总是查看生成的HTML源代码。

<?php 
$count = 0;
foreach($sections as $section):
//if the result of the modulo operation is 0, open new row
if($count % 3 == 0): ?>
 <div class="row">
<?php endif ?>
// Display your inner divs here
<?php if($count % 3 == 2): ?>
</div>
<?php endif ?>
<?php $count++; 
endforeach ?>

您需要在增加$counter

之前关闭div

<?php $counter++; if($counter % 3 === 0) :  echo '</div>'; endif; ?>

改为

<?php if($counter % 3 === 0) :  echo '</div>'; endif; $counter++;  ?>

<?php 
    // add a counter
    $counter = 1;
    ?>
      <?php $query = new WP_Query(array("post_type" => "services","posts_per_page" => -1 )); ?>
      <?php if($query->have_posts()):?>
    <div class="row">
      <?php while($query->have_posts()):$query->the_post();?>
      <div class="col-md-4">
        <div class="service-media"> <?php the_post_thumbnail(); ?> </div>
        <div class="service-desc">
          <h3><a href="<?php the_permalink(); ?>"><?php the_title(); ?></a></h3>
          <?php the_content(); ?>
        </div>
      </div>
      <?php if($counter % 3 === 0) :?>
        </div><div class="row">
      <?php endif; ?>
     <?php $counter++; endwhile; endif; wp_reset_postdata(); ?>

<?php
    //Wrap every 3 elements with div.row
    $index = 1;
    foreach( $sub_pages as $sub_page ) {
        if ($index % 3 == 1 || $index == 1) { // beginning of the row or first
            echo '<div class="row">';
        }
        echo '<div class="col-sm-4">';
        echo $sub_page->post_title;
        echo $sub_page->post_excerpt;
        echo '</div><!-- .col -->';
        if ($index % 3 == 0 || $index == count($sub_pages)) { // end of the row or last
            echo '</div><!-- .row -->';
        }
        $index++;
    }
    //Wrap every 5 elements using array_chunk():
    $chunks = array_chunk($original, 5);
    foreach ($chunks as $each_chunk) {
         // echo out as an unordered list
     }
    ?>