jQuery动态调整divs

我使用twitter bootstrap v2.3在其CSS库中的媒体缩略图。你可以看到我在这里工作：http://beanstalkwebsolutions.com/portfolio-overview jQuery动态调整divs

这里是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负载，每次屏幕调整基于哪个缩略图有最大的高度。

我得到了所有的工作，但现在我无法弄清楚的问题是，当你拖动屏幕到更小/更大的尺寸和最小高度变得非常大，我没有代码来减少min-高度，所以他们的缩略图div看起来太大了。有没有人对我有任何代码建议，所以divs都会有相同的高度，但不会太大？

如果你设置高度 CSS属性，而不是最小高度，该解决方案不适合我原来的目标，因为该文本段落结束的div外部延伸工作。

来源

2013-10-31 Genetisis

了与此相关的行“divs.css（‘最小高度’，maxHeight +‘像素’ ）;”。每次调整大小时，maxHeight只会增加。也许你需要知道窗口大小来检测何时降低图像的高度。在增加浏览器大小时要稍微清楚一点，当您减小浏览器大小时，图像的大小会增加，因此调整图像大小时不会发生任何变化。 –

你需要支持哪些浏览器？如何使用CSS“flexbox”？ http://coding.smashingmagazine.com/2011/09/19/css3-flexible-box-layout-explained/ –

托马斯哈里斯，是的，你的澄清是正确的。如果我使用窗口大小的方法，你有一个代码示例，你可以告诉我吗？ – Genetisis

在窗口调整大小，您可以重新设置的div的最小高度，这样的： -

$(window).resize(function() { 
    if($(window).height() < 300){ 
    $("div").css({min-height: 300px}); 
} else { 
    $("div").css({min-height: 600px}); 
} 
});

来源

2013-10-31 07:47:53

谢谢！这工作。我会喜欢，但我需要15点声望才能这样做。 – Genetisis

jQuery动态调整divs

回答

相关问题