2017-05-10 11 views
0

ロード時に等高さのカラムを作成するためには非常にうまくいく次のコードを使用していますが、ブラウザのサイズ変更やデバイスの向きが変更されたときに問題になります。resize(WordPress)の等高線カラム

//Set equal height columns 
 
(function($) { 
 
\t if ($(window).width() > 414) { 
 

 
     // Select and loop the container element of the elements you want to equalise 
 
     $('#contact-dept').each(function(){ 
 

 
      // Cache the highest 
 
      var highestBox = 0; 
 
      
 
      // Select and loop the elements you want to equalise 
 
      $('.vc_col-sm-4', this).each(function(){ 
 

 
      // If this box is higher than the cached highest then store it 
 
      if($(this).height() > highestBox) { 
 
      \t highestBox = $(this).height(); 
 
      } 
 
     }); 
 
      
 
      // Set the height of all those children to whichever was highest 
 
      $('.vc_col-sm-4',this).height(highestBox);    
 
    }); //End Loop 
 
    }; //End Media Query 
 
})(jQuery);

私はリサイズ上で実行するために、これをトリガーすることができる方法上の任意の提案。 jQuery .rezize()のいくつかのバリエーションを試しましたが、動作することができませんでした(私はjsを初めて使用しています)。

多くのありがとうございます。

+0

その他のご意見をお待ちしております。ありがとうございました。 –

答えて

0

これをCSSで簡単に解決できます。親に対してはdisplay:tableを使用し、列にはtable-cellを表示します。 jQueryコードは必要なくなり、ブラウザがレイアウトを処理します。

+0

私はいくつかの場所で使用していますので、すべてのコードを再度変更する必要はありませんが、感謝します。 –