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);

如何在框中断时调整两列的大小。我正在尝试内心高度，但那是行不通的。有人有什么想法吗？

Answer 1

只需使用CSS让自己获得相同的高度列，就可以省去很多麻烦。最简单的方法是将元素的显示属性更改为table-cell：

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列布局。

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

1 个答案: