Question

我有一个FAQ页面。一致的问题。问题的顺序无关紧要。重要的是布局。它是一个三列布局。

当您只有3个问题时，布局是正确的。看起来像这样。

[问题Z] [问题A] [问题O]

问题：
当你有4个问题时，布局看起来像这样。

[问题Z] [问题A]
[问题X] [问题O]

看起来应该是这样的。

[问题Z] [问题A] [问题O]
[问题X]

它是一个3列布局。我想问题填写第一行。而不是从第二个开始。

我需要这样做，而不需要修改Bootstrap网格。

以这种方式设置网格，当用户点击更多关于问题的阅读时，只有列扩展而不是行。

<?php if ( $wp_query->have_posts() ) : ?>
    <?php 
        $counter=0;
        $total_posts = $wp_query->post_count;
        $posts_per_column = ceil($total_posts / 3);
    ?>


<section class="faq content">
<div class="container-fluid">
  <div class="container-wrapper-faq">
    <div class="row">
    <div class="col-lg-4">
      <div class="col-lg-12">
            <?php while ( $wp_query->have_posts() ) : $wp_query->the_post(); $counter++; ?>                 
          <div class="faq-all">
            <div class="faq-item">
              <h2><?php the_title(); ?></h2>
              <article>
                <div class="faq-intro">
                   <?php the_content(); ?>
                </div>
                <div class="faq-info">
                   <?php the_content(); ?>
                </div>   
                <div class="faq-link">
                  <a href="#" class="read-more">LES HELE SVARET</a>
                  <a href="#" class="read-less">LES MINDRE</a>
              </div>
             </article>
            </div>
          </div> 
            <!-- Close and open div if the "counter" divided by the "posts per column" of columns you want equals zero -->
            <?php if($counter % $posts_per_column == 0) echo '</div></div><div class="col-lg-4"><div class="col-lg-12">'; ?>
            <?php endwhile; ?>
        </div>
    </div>
  </div>
  </div>
</div>

提前致谢

Answer 1

所以我确信有一种更清洁的方法可以解决这个问题，但它的早期和我的大脑不能100％运作。这应该可以解决您的问题。基本上如果总帖子数= 4,7,10,13 ......之前我们所拥有的将总是修剪它以便它从未到达第3列。我添加了一些代码来检查它是否是这些特殊情况之一我只做了一些基本数学并将总帖子减去一，然后除以三，如果它是一个圆数我知道它是一个特例。所以我将每列的帖子更改为少一个，然后在循环中我们检查它是否是第一个帖子，我们不会增加计数器。

<?php if ( $wp_query->have_posts() ) :
  $counter=0;
  $columns=3;
  $total_posts = $wp_query->post_count;
  $posts_per_column = ceil($total_posts / 3);
  $posts_per_column_test_value = ($total_posts - 1) / $columns;
  $is_special_case = false;
    if($total_posts != 1 && (intval($posts_per_column_test_value) == $posts_per_column_test_value)){
        $is_special_case = true;
        $posts_per_column = $posts_per_column - 1;
    }
?>
<section class="faq content">
    <div class="container-fluid">
      <div class="container-wrapper-faq">
        <div class="row">
            <div class="col-lg-4">
            <div class="col-lg-12">
                <?php while ( $wp_query->have_posts() ) : $wp_query->the_post();
                  if($is_special_case && $wp_query->current_post == 0){
                            // do nothing so we get an extra post in the first column
                            } else { 
                                $counter++
                            }: ?>                 
                  <div class="faq-all">
                    <div class="faq-item">
                      <h2><?php the_title(); ?></h2>
                      <article>
                        <div class="faq-intro">
                           <?php the_content(); ?>
                        </div>
                        <div class="faq-info">
                           <?php the_content(); ?>
                        </div>   
                        <div class="faq-link">
                          <a href="#" class="read-more">LES HELE SVARET</a>
                          <a href="#" class="read-less">LES MINDRE</a>
                      </div>
                     </article>
                    </div>
                  </div> 
            <?php
                // Close and open div if the "counter" divided by the "posts per column" of columns you want equals zero
                if($counter % $posts_per_column == 0) echo '</div></div><div class="col-lg-4"><div class="col-lg-12">';
            ?>
            <?php endwhile; ?>
        </div>
            </div>
          </div>
      </div>
    </div>
</section>

PHP和Wordpress - 将内容放在正确的列中

1 个答案: