使用CSS使表行高度相同

Question

I'm building an app in AngularJS that gets product data and displays it on a page. The only reason I mention Angular is because, due to the way ng-repeat works, I can't simply put my images into one row so they default to the same height - each 'product' has to be its own td , table , div or similar.

Anyway, that won't make sense without explaining my code and the issues I'm having. I have products being displayed in rows of three. They look like this:

As you can see, when the images are all the same height, everything works fine. The issue is, not all of my images are the same height, nor will they ever be. I'm looking for a solution that accommodates this.

The Markup

To avoid ugly <table> code I've put it all in a fiddle here: http://jsfiddle.net/qGu2V/6/

The // spacer images I've marked in the fiddle would (if I knew more about tables) make the searchImgContainer fill the height of the containing <td> .

The Question

Any ideas on how I can achieve this? The goal is not only to make all image containers the same height, but also to vertically centre the image within the container (so there is equal white space above and below it).

I know I can do this with javascript/jquery, but I'm loading hundreds and thousands of products onto a (mobile, responsive) page and I feel like constantly checking the height of the neighbouring image would create a large page load.

Is this achievable or am I stuck with Javascript solutions?

Answer 1

Try this one.. Demo

.searchThumb{
    height:100px;
}