たまたまこれに出くわした人を助けるために、少し編集してください。いくつかの画像を追加するまで、与えられた答えは完全に機能しました。追加した画像には幅や高さが設定されておらず、max-width 100% css が適用されているため、流動的なグリッド内でスケーリングされます。問題は、クロムが列の高さの合計に画像の高さを追加していなかったため、列が短くレンダリングされていたため (画像の高さを差し引いたもの) にあるようです。
コード行の変更:
$(document).ready(function(){
に
$(window).load(関数() {
問題を解決するようです。
------------ 元の質問 ----------------
ここに出くわしたこのjqueryコードを実装しようとしています; 私は一生、それを機能させる方法を理解することはできません。
ドキュメントに jQuery へのリンクを含め、さまざまなオプションを試しましたが、うまくいきません。
私のページは html5 2 列レイアウトで、2 列は % 幅で設定され、フロートされています。左の列の内容が長いので均等にしてほしいです。
クラスunevenheights
をdivに追加する必要があると思います。私はそれを各列に追加し、ラッパーdiv
で試してみましたが、うまくいきませんでした。
最初のセクションを別のファイルにコピーして.jsとして保存してから、それにリンクしてページヘッドのタグ$('div.unevenheights').setAllToMaxHeight()
内の部分を使用しようとしましたが、喜びはありませんでした.<script>
誰かが初心者向けにどのように実装すればよいか説明してもらえますか?
$.fn.setAllToMaxHeight = function(){
return this.height( Math.max.apply(this, $.map( this , function(e){ return $(e).height() }) ) );
}
// usage: $('div.unevenheights').setAllToMaxHeight()