使用CSS使表行具有相同的高度

Question

我正在AngularJS中构建一个应用程序来获取产品数据并将其显示在页面上。我提到Angular的唯一原因是，由于ng-repeat的工作方式，我不能简单地将我的图像放入一行，因此它们默认为相同的高度 - 每个“产品”必须是它自己的{{ 1}}，td，table或类似。

无论如何，如果不解释我的代码和我遇到的问题，这是没有意义的。我的产品以三行显示。它们看起来像这样：

如您所见，当图像高度相同时，一切正常。问题是，并非我的所有图像都具有相同的高度，也不是。我正在寻找适合这种情况的解决方案。

标记

为了避免丑陋的div代码，我把它放在一个小提琴中：http://jsfiddle.net/qGu2V/6/

我在小提琴中标记的<table>图像（如果我对表有更多了解）会使// spacer填充包含searchImgContainer的高度。

问题

关于如何实现这一目标的任何想法？目标不仅是使所有图像容器具有相同的高度，而且还使图像在容器内垂直居中（因此在其上方和下方有相同的空白区域）。

我知道我可以用javascript / jquery做到这一点，但是我将成百上千的产品加载到（移动的，响应式的）页面上，我觉得不断检查相邻图像的高度会产生大的页面加载

这是可以实现还是我坚持使用Javascript解决方案？

Answer 1

试试这个.. Demo

.searchThumb{
    height:100px;
}