jquery - 修改 Jquery 以重置浏览器窗口大小

Question

我有一个具有类似 div 的响应式布局，我正在应用 Jquery，因为所有 div 都与具有更多内容的那个的高度相匹配。但是，如果要重新调整浏览器窗口的大小，则所有 div 将保持与加载页面时相同的高度，从而使文本从 div 中消失。每次用户调整浏览器窗口大小时，有没有办法以某种方式继续运行 Jquery？

为了更具描述性地描述我正在尝试完成的工作，它是让我的 div 表现(在浏览器窗口重新调整)作为具有文本内容和属性宽度的普通 div:#%;高度:自动；唯一的区别是所有 div 都将匹配高度较大的那个的高度。

这是我所拥有的链接:http://as.sjsu.edu/cf/vaishak/equalizeTest/index.html

这是我最初必须获得最大高度的 Jquery:

<script>
jQuery(function(){
var maxHeight = 0;
$(".box").each(function(){
   if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
});
$(".box").height(maxHeight);
});
</script>

这是在调整窗口大小时仍然无法正常工作的更新版本。

$(document).ready(function(){
    $(window).resize(function(event) {
        resizeDiv();
    });
    $(document).ready(function(){
        resizeDiv();
    });
    function resizeDiv(){
        var maxHeight = 0;
        $(".box").each(function(){
           if ($(this).height() > maxHeight) { maxHeight = $(this).height(); }
        });
        $(".box").height(maxHeight);
    }
    });

任何帮助将不胜感激!

Answer 1

您可以忘记为此使用 JavaScript 而使用纯 CSS:

http://cssdeck.com/labs/ygq5x6k3

<div class="container">
    <div>First</div>
    <div>Second</div>
</div>

.container {
    display: table; /* optional */
    width: 100%; /* optional */
}

.container div {
    display: table-cell;
}

它很灵活，可以根据需要使用任意多的“列”。由于它是纯 CSS，您甚至可以通过媒体查询为移动设备禁用它。