保持没有插件内联的 WordPress 相关帖子

Question

我在 WordPress 上运行博客，并希望我的单个帖子显示相关帖子，但没有任何插件。我在单页底部添加了以下代码 -

<div class="relatedposts">
<h3>Related posts</h3>
<?php
  $orig_post = $post;
  global $post;
  $tags = wp_get_post_tags($post->ID);

  if ($tags) {
  $tag_ids = array();
  foreach($tags as $individual_tag) $tag_ids[] = $individual_tag->term_id;
  $args=array(
  'tag__in' => $tag_ids,
  'post__not_in' => array($post->ID),
  'posts_per_page'=>4, // Number of related posts to display.
  'caller_get_posts'=>1
  );

  $my_query = new wp_query( $args );

  while( $my_query->have_posts() ) {
  $my_query->the_post();
  ?>

  <div class="relatedthumb">
    <a rel="external" href="<? the_permalink()?>"><?php the_post_thumbnail(array(150,100)); ?><br />
    <?php the_title(); ?>
    </a>
  </div>

  <? }
  }
  $post = $orig_post;
  wp_reset_query();
  ?>
</div>

但是它们以垂直线显示，而我想将它们水平地连续显示。您可以在下面的屏幕截图中看到它们 Related posts vertically shown

所以请帮助我找出问题，以便我可以在没有插件内联的情况下保留 WordPress 相关帖子。非常感谢您。

Answer 1

您可以将.relatedthumb 定义为弹性框。

a {
cursor: pointer;
}
.relatedthumb {
display:flex;
justify-content: flex-start;
}

<div class="relatedposts">
  <h3>Related posts</h3>
  <div class="relatedthumb">
    <a><img src="http://lorempixel.com/75/100" /><p>Dummy text</p></a>
    <a><img src="http://lorempixel.com/75/100" /><p>Dummy text</p></a>
    <a><img src="http://lorempixel.com/75/100" /><p>Dummy text</p></a>
  </div>
</div>