5

Twitter ブートストラップ v2.3 の CSS ライブラリにあるメディア サムネイルを使用しています。ここで私が取り組んでいることを見ることができます。

私が使用しているjQueryは次のとおりです。

<script>
$(window).load(function () {
    var maxHeight = 0;
    var divs = jQuery(".thumbnail");
    jQuery.each(divs, function () {
        var height = jQuery(this).height();
        if (maxHeight < height) maxHeight = height;

    });
    divs.css('min-height', maxHeight + 'px');
});
$(window).resize(function () {
    var maxHeight = 0;
    var divs = jQuery(".thumbnail");
    jQuery.each(divs, function () {
        var height = jQuery(this).height();
        if (maxHeight < height) maxHeight = height;

    });
    divs.css('min-height', maxHeight + 'px');
});
</script>

基本的に私の目標は、各サムネイルの高さが異なり、それらをすべて同じ高さにしたかったため、このスクリプトはロード時に CSS ですべて同じ最小高さを与え、サムネイルが最も高いものに基づいて画面のサイズが変更されるたびに高さ。

私はそれをすべて機能させましたが、今では理解できない問題は、画面を小さい/大きいサイズにドラッグすると、最小高さが非常に大きくなるため、最小高さを減らすコードがないため、サムネイルdiv が大きすぎるように見えます。div の高さはすべて同じですが、大きくなりすぎないようにするためのコードの提案はありますか?

また、 min-heightではなく高さcss プロパティを設定すると、テキストの段落が div の外に出てしまうため、解決策は元の目標では機能しません。

4

1 に答える 1

10

ウィンドウのサイズ変更時に、次のように div の最小高さを再度設定できます。

$( window ).resize(function() {
  if($( window ).height() < 300){
  $( "div" ).css({min-height: 300px});
 } else {
  $( "div" ).css({min-height: 600px});
 }
});
于 2013-10-31T07:47:53.890 に答える