0

私は現在レスポンシブ デザインに取り組んでおり、3 つの列にいくつかのコンテンツ ボックスがあります。すべてのコンテンツ ボックスを同じ高さにしたい。それで、私はいくつかのGoogle'ingを行い、いくつかのjQueryソリューションを見つけました。

私は最終的にこれに似たものに落ち着きました：

$(".equal-height").each(function() { 
    maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
});

$(".equal-height").height(maxHeight);

1つの問題を除いて、これはうまく機能します。

ウィンドウのサイズを変更すると、列の幅が広くなったり細くなったりするため、テキストが改ページされます。

JavaScript は、ウィンドウのサイズ変更中に改ページされたテキストの高さを計算できないようです。

ウィンドウのサイズ変更とテキストの問題で同様の問題が見つかりました。

誰かがこれに対する解決策を見つけましたか?

同じ高さの列を使用したレスポンシブ デザインがこれほど難しいとは信じられません。

アイデアをありがとう！

マーク

4

1 に答える 1

0

さて、私は実際に何が必要かを最終的に理解しました。

最終的なコードは次のようになります。

// Reset max height for each class
var intMaxHeight = 0;

// We MUST remove all heights from the various DIV elements
// NOTE: If we don't do this then the height will stay the same no matter what 
// after the first call - it will just stay the same as the first intMaxHeight
$(".content-box-content").each(function() {
    $(this).css("height", "");
}); 

// Set the max height of the tallest column
$(".content-box-content").each(function() {
    if (intMaxHeight < $(this).height()) {
        intMaxHeight = $(this).height();
    } else {
        intMaxHeight = intMaxHeight;
    }
});

// Set all columns to the height of the tallest column
$(".content-box-content").each(function() {
    $(this).css("height", intMaxHeight + "px");
});

キーは$(this).css("height", "");の設定でした。ライン。

それがなければ、関数は同じ高さを何度も使用し続け、機能していないように見えました.

これは、ウィンドウのサイズが変更され、テキストが改ページされたときに、「継続的に」正常に起動するようになりました。

于 2013-06-10T21:33:51.763 に答える