php - 自定义帖子类型显示缩略图 - WordPress

Question

谁知道为什么我的“事件”列表显示如下:

取而代之的是:

所以问题是；如何使自定义帖子类型列表显示为列表，无论图像大小如何？我认为它目前正在尝试显示为行中的列 - 我试图删除下面代码中的 block : $portfolio_count % 4 == 0 - 但这只是打破它......

这是我的循环:

        <?php
        $args = array( 
          'post_type' => 'events'
        );
        $the_query = new WP_Query( $args );

        ?>

        <?php if ( have_posts() ) : while ( $the_query->have_posts() ) : $the_query->the_post(); ?> 

        <div class="events-index">
          <a href="<?php the_permalink(); ?>"><?php the_post_thumbnail( 'event-thumb' ); ?></a>
          <a href="<?php the_permalink(); ?>"><h3><?php the_title(); ?></h3></a>
          <h4><?php the_field('date_of_event'); ?></h4>
          <p><?php the_field('location'); ?></p>
        </div>

        <?php $portfolio_count = $the_query->current_post + 1; ?>
        <?php if ( $portfolio_count % 4 == 0): ?>

        <?php endif; ?>

        <?php endwhile; endif; ?>

这是 CSS:

.events-index {
  border-bottom: 1px solid #eee;
  margin-bottom: 30px;
  padding-bottom: 15px;
}

.events-index img {
  float: left;
  margin:0 25px 20px 0;
}

.events-index  h4 {
  margin:0 0 20px 0;
}

.events-index h4 {
  margin:0 0 20px 0;
}

.events-index p {
  color:#163a52;
  font-style: italic;
  margin: 10px 0 10px 0;
}

.events-index h4 {
  color:#163a52;
  margin-bottom: 0;
}

我目前在 functions.php 文件中有这个:

add_image_size( 'event-thumb', 250, 150, true ); // Hard Crop Mode

Answer 1

那是因为 img 向左浮动了。在 .events-index block 之后添加下面的 CSS block 。

.events-index::after {
  content: '.';
  display: block;
  color: transparent;
  clear: both;
}