Question

我正在使用Advanced Custom Fields在特定网页上显示CPT。我已将其设置为使用类div将o-table-cell o-table类display:table;中的每个帖子包含在父级div中，这很正常。

我正在使用display:table-cell和<div class="o-table"> <div class="o-table-cell">Dynamic Content</div> <div class="o-table-cell">Dynamic Content</div> <div class="o-table-cell">Dynamic Content</div> </div> <div class="o-table"> <div class="o-table-cell">Dynamic Content</div> <div class="o-table-cell">Dynamic Content</div> <div class="o-table-cell">Dynamic Content</div> </div>作为内容，所有内容都必须在高度和位置方面相互关联，这是最好的。

到目前为止的工作原理：

o-table-cell

但有时我每行只有一个或两个帖子，这会导致o-table填充<div class="o-table"> <div class="o-table-cell">Dynamic Content</div> <div class="o-table-cell">Dynamic Content</div> <div class="o-table-cell">Dynamic Content</div> </div> <div class="o-table"> <div class="o-table-cell">Dynamic Content</div> <div class="o-table-cell">Dynamic Content</div> <div class="o-table-cell">Empty table cell</div> </div> <div class="o-table"> <div class="o-table-cell">Dynamic Content</div> <div class="o-table-cell">Empty table cell</div> <div class="o-table-cell">Empty table cell</div> </div> <div class="o-table"> <div class="o-table-cell">Dynamic Content</div> <div class="o-table-cell">Dynamic Content</div> <div class="o-table-cell">Dynamic Content</div> </div>，无论设置的宽度和最大宽度如何。所以我想也算一下，如果连续只有一个帖子或两个帖子，所以我可以添加一些空白的o-table-cell div。

我希望如何运作的示例：

<?php 
                $posts = get_field('training_courses_posts');
                if( $posts ): ?>
                    <div class="o-table o-mrg-btm-1">
                    <?php foreach( $posts as $post): // variable must be called $post (IMPORTANT) 
                    if ($i > 0 && ($i %3 == 0)) {
                    ?>
                    </div>
                    <div class="o-table o-mrg-btm-1">
                    <?php } ?>
                    <?php setup_postdata($post); ?>
                        <div class="o-table-cell o-table-vt classes-item-wrapper classes-item-alt">
                            <div class="classes-item <?php the_field('color'); ?>">
                                <a href="<?php the_permalink(); ?>" class="classes-image">
                                    <?php
                                    $thumb = get_post_thumbnail_id();
                                    $img_url = wp_get_attachment_url($thumb, 'full'); //get img URL
                                    $image = aae_aq_resize($img_url, 550, 400, true, '', true);
                                    ?>
                                    <img src="<?php echo $image[0]; ?>">
                                </a>
                                <h2 class="classes-title">
                                    <a href="<?php the_permalink(); ?>">
                                        <?php the_title(); ?>
                                    </a>
                                </h2>
                                <div class="classes-excerpt"><?php the_field('next_course');?></div>
                                <a href="<?php the_permalink(); ?>" class="primary-btn">find out more</a>
                            </div>
                        </div> 
                    <?php $i++; endforeach; ?>
                    </div>
                    <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
                    <?php endif; ?>

到目前为止我的代码：

.o-table {
display: table;
height: 100%;
width: 100%;
}

.o-table-cell {
display: table-cell;
-webkit-box-flex: 0;
-ms-flex: 0 0 33.3333333333%;
flex: 0 0 33.3333333333%;
max-width: 33.3333333333%;
width: 33.3333333333%;
margin-bottom: 30px;
height: 100%;
}

CSS：

public static function tableName()
{
  return '{{%сurrencies}}';
}

Answer 1

代码与您的代码非常相似，而不是使用模数我使用了相等性检查。我也以同样的方式使用它，也在我的网站上。

我希望它也适合你。

$count = 0;
$posts = get_field('training_courses_posts');
if( $posts ): ?>
  <div class="o-table o-mrg-btm-1">
        <?php 
            foreach( $posts as $post): // variable must be called $post (IMPORTANT)
            setup_postdata($post); 
            $thumb = get_post_thumbnail_id();
            $img_url = wp_get_attachment_url($thumb, 'full'); //get img URL
            $image = aae_aq_resize($img_url, 550, 400, true, '', true);     

            if($count == 3)
            {
                echo '</div><div class="o-table o-mrg-btm-1">';
            }
        ?>
        <div class="o-table-cell o-table-vt classes-item-wrapper classes-item-alt">
          <div class="classes-item <?php the_field('color'); ?>">
            <a href="<?php the_permalink(); ?>" class="classes-image">
                <img src="<?php echo $image[0]; ?>">
            </a>
            <h2 class="classes-title">
            <a href="<?php the_permalink(); ?>">
                <?php the_title(); ?>
            </a>
            </h2>
            <div class="classes-excerpt">
                <?php the_field('next_course');?>
            </div>
            <a href="<?php the_permalink(); ?>" class="primary-btn">find out more</a>
          </div>
        </div>
      <?php $count++; 
      endforeach;
     ?>
  </div>
  <?php wp_reset_postdata(); // IMPORTANT - reset the $post object so the rest of the page works correctly ?>
    <?php endif; ?>
      ?>

根据一行中有多少帖子具有条件HTML

1 个答案: