自定义文章类型显示缩略图 - WordPress的

问题描述:

会有人知道为什么我的 '事件' 列表显示是这样的:自定义文章类型显示缩略图 - WordPress的

enter image description here

取而代之的是:

enter image description here

所以问题将会;如何将自定义帖子类型列表显示为一个列表,一个接一个,不管图片的大小如何?它目前正试图显示为行中的列我想 - 我试图删除下面的代码块说:$ 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 
+0

我认为它是因为你的图像向左浮动。 –

这是因为img浮在左边。在.events-index块之后添加CSS块。

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

完美!谢谢 :) –