使用jQueryの/ CSS

Question

すべての要素の最も高い可能性の重複見つけるために：
CSS - Equal Height Columns?

を私は3つのdivを持っています。このよう

：

<div class="features"></div> 
<div class="features"></div> 
<div class="features"></div> 

彼らは、テキストで満たさしようとしています。どれくらいか分かりません。事は、彼らがすべて平等な高さであることは不可欠です。

jQuery（またはCSS）を使用してDIVのうち最も高いものを探し出し、他の2つを同じ高さに設定して、同じ高さのDIVを作成する方法はありますか？

これは可能ですか？

Answer 1

CSSで高さや比較を簡単に選択することはできませんが、jQueryといくつかの反復で簡単にこの問題を処理する必要があります。私たちは、それぞれの要素をループはよと最も高い要素を追跡し、その後、我々は再びループだろうと（JSFiddle作業）最も高いのものであることを、各要素の高さを設定します。

$(document).ready(function() { 
    var maxHeight = -1; 

    $('.features').each(function() { 
    maxHeight = maxHeight > $(this).height() ? maxHeight : $(this).height(); 
    }); 

    $('.features').each(function() { 
    $(this).height(maxHeight); 
    }); 
}); 

[補遺]

Sheriffderekはa JSFiddle for this solution in a responsive gridを手がけた。ありがとう！

[バージョン2]

ここでは、関数型プログラミングを使用してクリーンなバージョンです：

$(document).ready(function() { 
    // Get an array of all element heights 
    var elementHeights = $('.features').map(function() { 
    return $(this).height(); 
    }).get(); 

    // Math.max takes a variable number of arguments 
    // `apply` is equivalent to passing each height as an argument 
    var maxHeight = Math.max.apply(null, elementHeights); 

    // Set each height to the max height 
    $('.features').height(maxHeight); 
}); 

[バージョン3 - サンセリフのjQuery]

ここにdoesnの更新されたバージョンがありますjQueryを使用する（作業JSFiddle）：

var elements = document.getElementsByClassName('features'); 

var elementHeights = Array.prototype.map.call(elements, function(el) { 
    return el.clientHeight; 
}); 

var maxHeight = Math.max.apply(null, elementHeights); 

Array.prototype.forEach.call(elements, function(el) { 
    el.style.height = maxHeight + "px"; 
}); 

（and here it is in ES6）

Answer 2

次の3つの列のdivを行うことができますが、この

<style type="text/css"> 
#wrapper { 
    position:relative; 
    overflow:hidden; 
} 

.features { 
    position:absolute; 
    float:left; 
    width:200px; /* set to whatever you want */ 
    height:100%; 
} 
</style> 

どんなものを入れheadタグ内でこの

<div id="wrapper"> 
<div class="features"></div> 
<div class="features"></div> 
<div class="features"></div> 
</div> 

のようにその周りにラッパーを追加しなきゃボックスの幅は、他も同じになるでしょう。お役に立てれば。申し訳ありませんが、私は現場でコードを作成しました。

Answer 3

あなたはjqueryの各機能を使用することができます。

var highest; 
var first = 1; 
$('.features').each(function() { 
    if(first == 1) 
    { 
     highest = $(this); 
     first = 0; 
    } 
    else 
    { 
     if(highest.height() < $(this).height()) 
     { 
       highest = $(this); 
     } 
    } 
    });