對齊不同高度的柵格項目

我有一個使用圖像下方的圖像和文本構建的柵格。而一些圖像的高度不同，我得到了像這樣的「階梯效果」。對齊不同高度的柵格項目

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

回答