我正在AngularJS中构建一个应用程序来获取产品数据并将其显示在页面上。我提到Angular的唯一原因是,由于ng-repeat
的工作方式,我不能简单地将我的图像放入一行,因此它们默认为相同的高度 - 每个“产品”必须是它自己的{{ 1}},td
,table
或类似。
无论如何,如果不解释我的代码和我遇到的问题,这是没有意义的。我的产品以三行显示。它们看起来像这样:
如您所见,当图像高度相同时,一切正常。问题是,并非我的所有图像都具有相同的高度,也不是。我正在寻找适合这种情况的解决方案。
标记
为了避免丑陋的div
代码,我把它放在一个小提琴中:http://jsfiddle.net/qGu2V/6/
我在小提琴中标记的<table>
图像(如果我对表有更多了解)会使// spacer
填充包含searchImgContainer
的高度。
问题
关于如何实现这一目标的任何想法?目标不仅是使所有图像容器具有相同的高度,而且还使图像在容器内垂直居中(因此在其上方和下方有相同的空白区域)。
我知道我可以用javascript / jquery做到这一点,但是我将成百上千的产品加载到(移动的,响应式的)页面上,我觉得不断检查相邻图像的高度会产生大的页面加载
这是可以实现还是我坚持使用Javascript解决方案?