html - 将网格元素与不同的高度对齐

Question

我有一个使用图像和图像下方的文本构建的网格。有些图像的高度不同，我得到了一个看起来像这样的“楼梯效果”。

我更喜欢一个版本，其中图像下方的所有文本都是对齐的，并且图像是底部对齐。

我想给 img 的容器 relative 定位，然后将 img 设置为 position: absolute; 使用 bottom: 0 可以解决这个问题，但没有骰子。

如果我给 img 的容器一个以像素为单位的高度，它就解决了这个问题，但是当我开始调整浏览器大小时，img 容器的高度保持在固定高度并且在小屏幕上看起来不太好。

关于如何自动设置 img 容器高度(用于响应)并使其保持图像和文本对齐的任何想法？

我在这里设置了一个 Codepen:http://codepen.io/realph/pen/zFEdv

感谢任何帮助。提前致谢!

Answer 1

添加以下CSS:

.row > ul > li{
  display: table-cell;
  vertical-align: top;
}

并删除放置图像的 img 样式。

Working Fiddle