私はこれまで何度もChrisCoyiersEqual Height Blocks in Rows jQueryスクリプトを使用してきましたが、常にうまく機能しています。
そうは言っても、私は常に特定の解像度のために構築されたWebサイトを開発してきました。今回はレスポンシブウェブサイトを開発していて、メインコンテナの幅は流動的です。そのため、問題が発生し、問題の解決策を見つけることができません。
クリスは彼の投稿で、流体の幅について次のように述べています。
流体の幅はどうですか?このためにテーブルを使用しない主なポイントの1つは、フロートdivが、使用可能な水平方向のスペースに基づいて自分自身を再配置できることです。これは、流体の幅に適しています。上記のコードを調整して、それに対処することもできます。基本的に、これを初めて実行するときは、各ブロックの高さを測定し、jQueryのdata()メソッドでそれを記憶します。次に、ウィンドウのサイズが変更されたら、コードを再度実行しますが、新しいサイズではなく、元のサイズを使用して行を調整します。
彼は特に流体幅のコンテナを参照していることに注意してください。私の場合、それはコンテナだけでなく、流体の幅も持つ子要素です。イコライズする必要のあるブロックは、同じブロックが流動的な幅を持ち、ウィンドウ/コンテナの解像度に合わせて調整する必要があります。
要素の「originalHeight」はコンテナのサイズによって変化するため、スクリプトは正しく機能しなくなると思います。
私の推測は間違っているかもしれませんが、何らかの形でこれは流体幅の要素では機能していません。助けを探しています!
もちろん、これが問題を示すために作成したjsfiddleです。ウィンドウの幅のサイズを変更するだけで、コンテナの高さが更新されないことがわかります。
次のコードを実行して、ウィンドウのサイズ変更イベントで関数を呼び出します。
$(window).resize(function() {
columnConform();
});
前もって感謝します