Html 将不同大小的图像放置在彼此下方

我在编写自己的Wordpress主题时遇到了一个问题。我在我的主页上展示了每一篇博客文章的特色图片。我想让它看起来像个画廊。因此，我希望图像显示在彼此下方和旁边，尽管它们的大小不同。请看图片，了解我已经走了多远：

所以我想完成的是，在纽约一号的下方，在“生命之旅”一号的旁边，展示花朵的形象。有什么办法吗

我非常感谢你的帮助！ 我的HTML代码：

<div class="post">

   <div class="outer-wrapper">
      <div class="imagefilter">
         <a href='<?php the_permalink(); ?>'><?php 
 the_post_thumbnail('mythumbnail');?></a>
       </div>

          <div class="text-wrapper">
          <span class="blogpost"><h2 class="post-title"><a href="<?php 
          the_permalink(); ?>"><?php the_title(); ?></a></h2></span>
       </div>   
    </div>

  </div>

---

你要找的是砖石画廊风格吗？ 如果是这样，这与CSS更相关，下面是一个示例

其主要思想是使用display:inline块而不是float。 比如说-

section {
 display: inline-block;
 margin:  0.25rem;
 padding:  1rem;
 width:  100%; 
 background:  #efefef;
}

---

这是超级简单的实现使用。GitHub项目通过以下方式实现这一点：

结果类似于下图（取自）

。（您在屏幕上看到的回流调整大小是由于响应断点更改了列数。）

对于懒惰的人，这里是他的Sass的纯CSS编译和美化版本：

.masonry {
    -webkit-column-gap: 2px;
    -moz-column-gap: 2px;
    column-gap: 2px;
    padding: 2px;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-sizing: border-box
}
@media (min-width: 511px) {
    .masonry {
        -webkit-columns: 3;
        -moz-columns: 3;
        columns: 3
    }
}
@media (min-width: 769px) {
    .masonry {
        -webkit-columns: 4;
        -moz-columns: 4;
        columns: 4
    }
}
@media (min-width: 1440px) {
    .masonry {
        -webkit-columns: 6;
        -moz-columns: 6;
        columns: 6
    }
}
.masonry .masonry-item {
    width: 100%;
    display: block;
    border-bottom: 2px solid transparent
}

---

如果您不需要它响应，您可以安全地删除媒体查询位，并直接在

上设置列数。例如，您可以使用Yes，这正是我要找的词：），但由于某种原因，当我使用inline block时，如果图像在容器中（可能是div），则图像都在彼此下方然后您需要将display:inline块添加到包装div中。如果它们仍然是一个在另一个之下，那么可能有一个100%宽度的div，或者根本没有任何CSS
.masonry {
  $spacing: 2px;
  column-gap: $spacing;
  padding: $spacing;
  columns: 2;
  transform: translateZ(0);
  box-sizing: border-box;

  @media (min-width: 511px) {columns: 3;}
  @media (min-width: 769px) {columns: 4;}
  @media (min-width: 1440px) {columns: 6;}

  .masonry-item {
    width: 100%;
    display: block;
    border-bottom: $spacing solid transparent;
  }
}

.masonry {
    -webkit-column-gap: 2px;
    -moz-column-gap: 2px;
    column-gap: 2px;
    padding: 2px;
    -webkit-columns: 2;
    -moz-columns: 2;
    columns: 2;
    -webkit-transform: translateZ(0);
    transform: translateZ(0);
    box-sizing: border-box
}
@media (min-width: 511px) {
    .masonry {
        -webkit-columns: 3;
        -moz-columns: 3;
        columns: 3
    }
}
@media (min-width: 769px) {
    .masonry {
        -webkit-columns: 4;
        -moz-columns: 4;
        columns: 4
    }
}
@media (min-width: 1440px) {
    .masonry {
        -webkit-columns: 6;
        -moz-columns: 6;
        columns: 6
    }
}
.masonry .masonry-item {
    width: 100%;
    display: block;
    border-bottom: 2px solid transparent
}