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

Question

有谁知道为什么我的活动列表＆＃39;显示如下：

而不是：

所以问题是;如何将自定义帖子类型列表显示为列表，无论图像大小如何，一个接一个地显示？它当前正试图在行中显示为行 - 我试图删除下面代码中的块：$ 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阻止后添加 CSS 块。

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