ベストセラー人気 WordPress テーマTop 30 詳細

jQueryを使ってDivの高さを同じに調整するII

Last Updated:2020年11月15日| 3のコメント
  • Naver ブログを共有する
  • Naver バンドに共有する
  • Facebook 共有する
  • Twitter 共有する
  • 카카오스토리공유하기

DIVの高さを同じに調整する方法は、いくつかの考えてみることができます。 次は、同じ要素(例えば、EqHeightDiv)を持つクラスの高さを同じに設定するjQueryスクリプトです。

$(document).ready(function(){
$('.container').each(function(){

var highestBox = 0;
$('.EqHeightDiv', this).each(function(){

if($(this).height() > highestBox)
highestBox = $(this).height();
});

$('.EqHeightDiv',this).height(highestBox);

});
});

このスクリプトを使用すると、containerクラス内EqHeightDivクラスを持つすべてのdivのサイズが同じに調整されます。

WordPressカテゴリ文のリストからアドレスを使用されているレイアウトを作成するために、このスクリプトを利用することができます。
2 columns with thumbnail and content
上記のように左側にサムネイルが配置され、右側にはコンテンツが位置するレイアウトが WordPressに頻繁に使用されます。 これらのレイアウトをより精巧に実装するには、いくつかの考慮すべき事項があります。

その中の一つがborderの使用です。 borderは幅に影響を与えるので、左右の列の幅を正確に30%vs. 70%に設定すると、XNUMXつの列が左右に整列されていません。 このような問題を解決するためには、 box-sizing:border-boxを追加してくれればされます。 その後、paddingとborderは、その要素の合計幅(width)と高さ(height)に含まれるようになり(ここ を参照)。 第二に、左右の列が高さを同じに調整する問題です。 これは、上記のjQueryコードで可能です。

上記のスクリプトでdivのサイズ変更は、同じcontainer内の要素にのみ適用されます。 (つまり、複数のcontainerがあれば、他のcontainerに内にあるEqHeightDivクラスとは独立しています。)

他にも次のようなjQueryのスクリプトも、状況に応じて応用することができます。

参照



3のコメント

コメント