0

画像と商品説明が並んでいます。次のようになります。 ここに画像の説明を入力

右側の画像は、前の 2 つの画像より明らかに高さが低くなっています。私はそれをもっとこのようにしたいと思います：

ここに画像の説明を入力

しかし、私は方法について少し途方に暮れています。注意事項は次のとおりです。

  1. 画像のサイズは事前にわかりません。これらはデータベースから AJAX 経由で呼び出されています。
  2. JavaScript ソリューションは必要ありません。CSS ベースのソリューションの方がはるかに望ましいと思います。
  3. ここに関係がある場合、私は を使用Bootstrapしています。
  4. ng-repeatこれは、上の画像のように、 1repeatが 1 つの「製品」に等しいAngularJS を使用して構築されています。したがって<tr>、画像の行を含む を作成し、単にそれらを与えるだけでは、vertical-align="middle"ここでは機能しません。

最後の要因のため、javascript なしではこれを行うことはできないと思います。内部にコードを含む JSFiddle を次に示します。

http://jsfiddle.net/CTVZR/5/

アイデア/解決策はありますか？可能であれば表にまとめて表示したいのですが、方法が思いつきません。

4

4 に答える 4

0

JS では、ループして最高値をチェックし、この値を他の値に適用する必要があります

$(document).ready(function(){
    var maxHeight = 0;
    $('.searchImgContainer').each(function(){
        if($(this).height() > maxHeight){
            maxHeight = $(this).height();
        }
    });
    $('.searchImgContainer').css('height',maxHeight);
});

http://jsfiddle.net/toniweb/CTVZR/14/

-下の画像を合わせて編集-

$(document).ready(function(){
    var maxHeight = 0;
    $('.searchImgContainer').each(function(){
        currentHeight = $(this).height();
        if(currentHeight > maxHeight){
            maxHeight = currentHeight;
        }
    });
    $('.searchImgContainer').each(function(){
        currentHeight = $(this).height();
        if(currentHeight < maxHeight){
              margin = maxHeight - currentHeight; $(this).find('img').css('marginTop',margin);
        }
    });

});

http://jsfiddle.net/toniweb/CTVZR/16/

-編集、Itayは私を働かせています! ^^ -

function fixImages(){
    var maxHeight = 0;
    $('.searchImgContainer').each(function(){
        currentHeight = $(this).height();
        if(currentHeight > maxHeight){
            maxHeight = currentHeight;
        }
    });
    $('.searchImgContainer').each(function(){
        currentHeight = $(this).height();
        if(currentHeight < maxHeight){
              margin = maxHeight - currentHeight; $(this).find('img').css('marginTop',margin);
        }
    });
}

$(document).ready(fixImages);
$(window).resize(fixImages);
于 2013-09-05T10:25:43.307 に答える