图像未对齐

Question

我的一个页面上有两个帖子彼此相邻。我让它们占据了页面的整个宽度。虽然我让这个工作，但在右边缩略图下面有一个小的差距。这只发生在safari而不是chrome上。我已经研究过，如果你没有在同一条线上使用img标签，可能会发生这种差距。但是，我没有使用ing标签，我从wordpress调用元素。有没有人有任何其他解决方案如何解决这个问题？可以通过CSS完成吗？提前谢谢。

safari，看看图片的底部是如何排列的

chrome，我希望它看起来如何 - 图片的底部排成一行

使用img标签代替php - https://jsfiddle.net/v90pug4o/ 虽然这与我的问题不完全相似，但我认为我会在img标签中提供它，因为我的代码是在php中。当你把它与这个小提琴 - https://jsfiddle.net/5bp0a3rf/进行比较时，小提琴中仍然存在一个间隙（它在右侧）非常明显 - 我把img标签放在同一条线上。但不幸的是，由于它的PHP，我无法用我的代码执行此操作。那就是为什么我想知道是否还有其他选择？

＆＃13;

＆＃13;

<div class="food-featured-posts">

  <div class="food-featured-posts-first">
    <?php query_posts( 'p=185'); while (have_posts()): the_post(); ?>
    <?php the_post_thumbnail(); ?>
  </div>

  <?php endwhile; ?>


  <div class="food-featured-posts-second">
    <?php query_posts( 'p=173'); while (have_posts()): the_post(); ?>
    <?php the_post_thumbnail(); ?>
  </div>
  <?php endwhile; ?>

</div>

＆＃13;

＆＃13;

＆＃13;

CSS

＆＃13;

＆＃13;

.food-featured-posts-first img {
  width: 100%;
    height:100%;
}
.food-featured-posts-second img {
  width: 100%;
    height:100%;
}
.food-featured-posts-first  {
  width: 50%;

}
.food-featured-posts-second  {
  width: 50%;

}
.food-featured-posts {
    display: flex;
    margin-bottom: 200px;
}

＆＃13;

＆＃13;

＆＃13;