将缩略图图像与底部

Question

我有一个带图片的简单缩略图和每个图片的标题。图像的高度不同，但总是125px。 字幕可以短而长，它们的高度不同。

我想对齐底部的所有图像，以便将标题放在同一级别。

在这里进行了一些研究并且能够在底部对齐图像，但没有标题

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;
}

当我添加标题时，嗯，这是一个MESS！

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

修改 我已经包含了一个包含多个包裹拇指的示例

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

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

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

任何想法如何实现这一目标？

Answer 1

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

＆＃13;

＆＃13;

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%;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

Answer 2

我在这里继续研究了几个小时，并为那些感兴趣的人找到了答案。

答案来自几年前创建的这篇非常相似的帖子：

Align multiple images (with captions) to baseline, all different heights

基本上，您只需将属性align-items从flex-end更改为baseline即可。就这么简单。

这是一个有效的例子 https://jsfiddle.net/fuk45osb/7/