将缩略图“跳转”到标题答案

【问题标题】：post thumbnail "jump" to the header将缩略图“跳转”到标题
【发布时间】：2017-06-25 23:46:02
【问题描述】：

我正在编写一个插件来显示最近的帖子，但是，无法弄清楚为什么缩略图不在 div 内并“跳转”到页面的标题。这是插件中的代码：

$my_query = new WP_Query( array(
    'post_type' => 'post',
    'posts_per_page' => 5
  ));

  if( $my_query->have_posts() ) : while( $my_query->have_posts() ) : $my_query->the_post();

        $html .="<div class=\"My-container\">";
        $html .="<div class=\"My-item\">" . the_post_thumbnail('thumbnail', array('class' => 'My-postImg')) . "</div>";
        $html .="<div class=\"My-item-1\">";
        $html .= "<p>" . the_category(', ') . " | " . the_time('M. d') . "</p>";
        $html .= "<h2>" . get_the_title() . " </h2>";
        $html .= "<p>" . the_category(', ') . "</p>";
        $html .= "<a href=\"" . get_permalink() . "\" class=\"button\">Read more</a>";
        $html .="</div>";

    endwhile; endif;


 $content .= $html;;       
 return $content;

另一个问题：我尝试在帖子末尾显示最近的帖子。因此，在将 $content 添加到 $html 之后，我必须返回它。有没有更清洁/更有效的方法来做到这一点？

谢谢

【问题讨论】：

要了解为什么缩略图不在 div 中，我们需要查看应用到它的 css 和“我的容器”。决定将 $html 放在 $content 之前或之后的位置。之前：返回 $html.$content - 之后：返回 $content.$html

标签： wordpress plugins

【解决方案1】：

感谢您的帮助。这是CSS。就在之前，事情是这样的：例如，如果我只输入文本

或等，然后它将在 .只有当涉及到缩略图时，它才会“跳跃”。

.My-container 只是一个标准的弹性盒子

    @charset "utf-8";
/* CSS Document */


.My-container {

  display: -webkit-box;
  display: -moz-box;
  display: -ms-flexbox;
  display: -webkit-flex;
  display: flex;

  -webkit-flex-flow: row nowrap;

  flex-direction: row;
  flex-wrap: nowrap;
}

.My-item {
    min-width: 300px;
    min-height: 300px;
    background-color: orange;
    display: block;

}

.My-item-1 {
    width: 200px;
    height: 100px;
    background-color: green;
}

【讨论】：