1

http://www.tmla.org/new_site/

それが関連するリンクです。ページを更新すると、問題が発生します。ブラウザまたはキャッシュから通常どおりページをロードするのは問題ないようです。なぜこれが起こっているのかわからない。誰かがこれに光を当てるのを手伝ってもらえますか？どんな助けでもいただければ幸いです。従うべきコード：

    (function($) {
        $.fn.equalHeights = function(minHeight, maxHeight) {
            column1 = 0;
            column2 = 0;
            column3 = 0;

            //FIND THE TOTAL HEIGHT OF EACH COLUMN BY ADDING UP EACH WIDGET, SORTING BY UNIQUE COLUMN CLASS
            this.each(function() {
                if($(this).hasClass('column1')) {
                    column1 = column1 + $(this).height();
                } else if($(this).hasClass('column2')) {
                    column2 = column2 + $(this).height();
                } else if($(this).hasClass('column3')) {
                    column3 = column3 + $(this).height();
                }
            });

            //alert(column1);
            //alert(column2);
            //alert(column3);


            //FIND THE TALLEST COLUMN
            tallest = Math.max(column1, column2, column3);

            //alert(tallest);

            //SIMPLE MATH TO DETERMINE HOW MUCH HEIGHT TO MAKE THE LAST WIDGET OF EACH COLUMN SO THEY LINE UP NICE AND NEAT
            column1 = tallest - column1 + $('#left_sidebar .widget').last().height();
            column2 = tallest - column2 + $('#center_sidebar .widget').last().height();
            column3 = tallest - column3 + $('#right_sidebar .widget').last().height();

            //alert('Add how much to Column 1: ' + column1);
            //alert('Add how much to Column 2: ' + column2);
            //alert('Add how much to Column 3: ' + column3);

            //alert('Left' + $('#left_sidebar .widget').last().css('height'));
            //alert('Center' + $('#center_sidebar .widget').last().css('height'));
            //alert('Right' + $('#right_sidebar .widget').last().css('height'));

            if(column1 != '0px') {
                $('#left_sidebar .widget').last().css('height', column1 + 'px');
            }

            if(column2 != '0px') {
                $('#center_sidebar .widget').last().css('height', column2 + 'px');
            }

            if(column3 != '0px') {
                $('#right_sidebar .widget').last().css('height', column3 + 'px');
            }
        } 
    })(jQuery);
4

1 に答える 1

4

好奇心から、「TMLAあなたはここにいることを熱望している」という画像に幅と高さの属性を追加できますか。equalHeightを適用すると、この問題が発生することがあります...画像が読み込まれているかどうかによっては、equalHeightが正しい高さを取得できません...実際には正しい高さですが、期待した高さではありません。

したがって、私の推測では、equalHeightsが適用されてから、この画像が読み込まれます。これが、最初の列に約166px多くある理由です。

すべての画像に幅と高さの属性があるため、他の列には表示されませんでした。

参考：列に同じ高さを設定する最も簡単な方法は、PaulIrishによるものです。申し訳ありませんが、元の投稿が見つかりません。コードは次のとおりです。

$.fn.setAllToMaxHeight = function(){
    return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}

使用法

$('.selector').setAllToMaxHeight();
于 2012-09-04T15:12:05.347 に答える