对齐不同高度的栅格项目

我有一个使用图像下方的图像和文本构建的栅格。而一些图像的高度不同，我得到了像这样的“阶梯效果”。对齐不同高度的栅格项目

enter image description here

我喜欢什么，是图像下面的所有文字对齐一个版本和图像筑底对齐。

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

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

关于如何自动设置img容器高度（为了响应）以及为了保持图像和文本对齐的任何想法？

我设置一个Codepen在这里我的奋斗：http://codepen.io/realph/pen/zFEdv

任何帮助表示赞赏。提前致谢！

2014-07-25 realph

你可以使用与显示图形和figcaption并设置布局：弯曲; http://codepen.io/anon/pen/tBkvl –

@GCyrillus这仍然不能解决问题。当您调整浏览器大小时，高度保持不变，网格物品之间会出现巨大空间。 – realph

添加下面的CSS：

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

，并删除img造型你在哪里定位图像。

2014-07-25 13:32:05

这使得所有'img's对齐顶部和标题不对齐。我希望所有的图像都对齐到底部，并且所有的文本也都一致。 – realph

回答