html - 在底部对齐具有不同尺寸和标题的缩略图图像

Question

我有一个简单的缩略图，其中包含图片和每张图片的标题。图片的高度不同，但始终为 125 像素。字幕可短可长，高度不同。

我想在底部对齐所有图像，这样我就可以将标题放在同一水平面上。

在这里做了一些研究，能够对齐底部的图像，但没有标题

https://jsfiddle.net/0bzz7397/2/

.thumb {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.thumb > div {
  flex: 0 0 125px;
  background-color: white;
}

.thumb > div ~ div {
  margin-left: 20px;
}

当我添加标题时，嗯，一团糟!

https://jsfiddle.net/fuk45osb/1/

编辑:我已经包含了一个带有多个包裹拇指的示例

https://jsfiddle.net/fuk45osb/5/

基本上，这就是我希望的效果。不同高度的图像都在底部对齐，标题从同一水平开始。它简单干净。

我试过使用 flexbox。但是，也许我错了，还有更好的方法。

有什么想法可以实现吗？

Answer 1

在这种非常有限的情况下，我会对标题和副标题使用绝对定位。

body {
  background: #eee;
}

.thumb {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
}

.thumb>div {
  flex: 0 0 125px;
  background-color: white;
  position: relative;
}

.thumb>div~div {
  margin-left: 20px;
}

.title {
  position: absolute;
  top: 100%;
  background: #fff;
  width: 100%;
}

<div class="thumb">
  <div>
    <a href=""><img src="" width="125" height="125"></a>
  </div>
  <div>
    <a href=""><img src="" width="125" height="170"></a>
    <div class="title">wefweergergerg erg er erg erg erg er gfwef</div>
  </div>
  <div>
    <a href=""><img src="" width="125" height="125"></a>
  </div>
  <div>
    <a href=""><img src="" width="125" height="130"></a>
  </div>
  <div>
    <a href=""><img src="" width="125" height="160"></a>
  </div>
  <div>
    <a href=""><img src="" width="125" height="125"></a>
    <div class="title">wefwefwef</div>
  </div>
  <div>
    <a href=""><img src="" width="125" height="125"></a>
  </div>
</div>