Question

我在图像下方使用图像和文字构建了一个网格。并且一些图像具有不同的高度，并且我得到了一个＆＃34;阶梯效应＆＃34;看起来像这样。

enter image description here

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

我认为提供img的容器relative定位，然后将img设置为position: absolute;并使用bottom: 0来解决此问题没有骰子。

如果我为img容器提供高度（以像素为单位），则会解决此问题，但是当我开始调整浏览器的大小时img容器＆＃39;高度保持固定的高度，在小屏幕上看起来不太好。

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

我已经在我的挣扎中设置了Codepen：http://codepen.io/realph/pen/zFEdv

感谢任何帮助。提前谢谢！

Answer 1

添加以下css：

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

并删除定位图像的img样式。