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

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のコメント

コメントを残す

メールアドレスは公開されません。 必須フィールドは *と表示されます