jquery - jQuery - 使用等列脚本重新计算高度

Question

http://www.indigoeastend.com/live-entertainment.html

我有一个上面列出的页面，其中有手风琴框，打开时会破坏布局。特别是最后一个。我使用以下脚本使列相等：

$(window).load(function() {
    $(".equal_heights").equalHeights();
});

(function($) {
    $.fn.equalHeights = function(minHeight, maxHeight) {
        tallest = (minHeight) ? minHeight : 0;
        this.each(function() {
            if($(this).height() > tallest) {
                tallest = $(this).height();
            }
        });
        if((maxHeight) && tallest > maxHeight) tallest = maxHeight;
        return this.each(function() {
            $(this).height(tallest).css("overflow","visible");
        });
    }
})(jQuery);

当盒子被打破时，我怎样才能让两列都调整大小。我正在尝试使用innerheight，但这不起作用。有人有什么想法吗？

Answer 1

只需使用 CSS 让自己的列高度相等，就可以省去很多麻烦。最简单的技术是将元素的显示属性更改为表格单元格：

http://tinker.io/ae84b

.main {
    display: table; /* optional */
}

.main article, .main aside {
    display: table-cell;
 }

<div class="main">
    <article>
        Lorem ipsum dolor sit amet...
    </article>

    <aside>
        I'm the aside!
    </aside>
</div>

这适用于无限数量的“列”，只要它们是相邻的并且是表格单元格。因为不使用浮点数，所以不需要清除它们。另一个优点是，因为它是纯 CSS，您可以通过媒体查询从窄设备中隐藏 2 列布局。