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

时间:2013-07-24 05:10:58

标签: javascript css html-table

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

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

Table Row Image

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

标记

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

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

问题

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

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

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

1 个答案:

答案 0 :(得分:0)

试试这个.. Demo

.searchThumb{
    height:100px;
}