HTML缩略图大小问题

我有一个缩略图大小的问题。在图片中，左中间的白色区域中应该有另一张图片，但由于上面的图片标题较长，因此跳过了空格。每次有长标题的图片出现时，大小都会变大。有没有什么方法可以在标题变长的情况下修改缩略图的大小

这是我的HTML代码和CSS，我什么都不写

<div class="panel-body">
  <div id="recipeResults" class="row">
    <!-- templates/BasicImages/imageTemplates.js -->
  </div>
</div>

下面是实际代码。对不起：）

{{json.hoverDescription}}

{{json.name}
{{json.description}}


拯救

您可以将此代码用于CSS中的框标记（或标题标记），以防止尺寸过大

。类名{
溢出：隐藏；
}

---

使用Flex可以垂直对齐不同高度的子对象，而不留间隙

<div id="outer-wrap">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

---

我不明白。你能给我你的链接吗？你可以为每个单独的块设置一个固定的高度，或者只使用一个父div来关闭三个子div。请为我们提供一个链接或源代码使用CSSP的flex属性请不要在没有任何代码的情况下发布问题。我们不是能够阅读和解决问题的魔术师。你能提供一个工作片段或一把小提琴的问题。我觉得我需要创建和玩css中的.缩略图

<div id="outer-wrap">
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
  <div class="child"></div>
</div>

div#outer-wrap {
  display: -ms-flexbox;
  -ms-flex-direction: column;
  -ms-flex-wrap: wrap;
  display: flex;
  flex-direction: column;
  flex-wrap: wrap;
  height: 100 vw;
}
div#outer-wrap .child {
  width: 33.3%;
}