製品データを取得してページに表示するアプリをAngularJSで構築しています。私が Angular について言及する唯一の理由は、ng-repeat動作方法が原因で、画像を 1 行に単純に配置できないため、デフォルトで同じ高さにすることができないためtdです。tablediv
とにかく、私のコードと私が抱えている問題を説明しないと意味がありません。商品を 3 列に並べて表示しています。それらは次のようになります。
ご覧のとおり、画像がすべて同じ高さの場合、すべて正常に機能します。問題は、すべての画像が同じ高さであるとは限らないことです。これに対応するソリューションを探しています。
マークアップ
醜いコードを避けるため<table>に、ここですべてをフィドルに入れました：http://jsfiddle.net/qGu2V/6/
フィドルでマークした// spacer画像は、（テーブルについてもっと知っていれば）searchImgContainer塗りつぶしを含むの高さになり<td>ます。
質問
どうすればこれを達成できるかについてのアイデアはありますか? 目標は、すべてのイメージ コンテナーを同じ高さにすることだけではなく、イメージをコンテナー内で垂直方向に中央揃えにすることでもあります (そのため、コンテナーの上下に等しい余白があります)。
javascript/jquery を使用してこれを実行できることはわかっていますが、何百、何千もの製品を (モバイル、レスポンシブ) ページにロードしており、隣接する画像の高さを常にチェックするとページのロードが大きくなるように感じます。
これは達成可能ですか、それとも Javascript ソリューションにこだわっていますか?