jquery - ボックスのセットの応答性と等しい高さ

Question

1 行に 3 つのボックスがあり、それぞれに画像とタイトルが含まれています。プロパティを使用heightして高さを等しくすることができます。しかし、レスポンシブ ビューでは、ボックスが縮小すると、高さが固定されているため、タイトルの後に余分な空白が表示されます (特に、タイトルが 2 行ではなく 1 行だけの場合)。

を使用できますpadding-bottomが、ボックスの高さが同じにはなりません。タイトルが長く、1 行ではなく 2 行を埋めるものもあるため、高さが高くなります。

これらのボックスに同じ高さを与えて、レスポンシブ ビューで縮小したときに余分な空白が生じないようにする解決策は何ですか?

Answer 1

jquery を使用する場合は、このコードをページの下部に追加します。

var max=0;
$('article').each( function (){
    if($(this).height()>max)
        max=$(this).height();
});
$('article').height(max);

Answer 2

ボックスにoverflow:hiddenとheightを使用します（要素を含むテキストの親）：

<div style="overflow:hidden;height:150px;"> 

編集: http://jsfiddle.net/G4PvQ/2/

Answer 3

この問題は、CSS のみのソリューションで解決できる普遍的な問題ですが、必要なソリューションは慎重に選択する必要があります。

Chris Coyier は、4 つの異なる CSS メソッドを使用した等高流動幅アイテムに関する素晴らしい記事を公開しました。ブラウザーのサポートを気にしないのであれば、私は個人的に FlexBox メソッドが好きです。

記事: http://css-tricks.com/fluid-width-equal-height-columns/
デモ: http://css-tricks.com/examples/FluidEqualHeightFauxColumns/

楽しんで。