對齊具有不同高度的網格項目

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樣式。

工作小提琴