Question

我知道很多css很好的解决方案等...简短告诉我，我希望这个工作，关于我是否有填充，边距，没有额外的标记，阴影，背景颜色......所以..我只是在寻找它的jquery版本。

在SO上找到了一些。试着申请。好像几乎可以工作。缩小窗口时，文本重叠。如果禁用js，则不会。

http://jsfiddle.net/ApUYv/4/

两个问题：

1）我们如何避免文本重叠？

2）我们应该使用document.ready还是window.load？

请注意：overflow: auto;可能不是一个选项，因为设计师不需要滚动条。：（

Answer 1

不确定，这是否是，你在寻找什么。但是我更改了您的javascript代码，以便在窗口调整大小时重新调整列高度：http://jsfiddle.net/ApUYv/6/

function resetHeight() {
   var maxHeight = 0;
   $(".equal-height").height("auto").each(function(){ 
       maxHeight = $(this).height() > maxHeight ? $(this).height() : maxHeight; 
   }).height(maxHeight);
}
resetHeight();
// reset height on resize of the window:
$(window).resize(function() { 
    resetHeight();
});

要在调整窗口大小时调整列的大小，您希望在$(window).resize()上使用回调，因此我已将代码封装到函数resetHeight中。

然后，您需要在每次调用此函数时重新计算maxHeight并正确执行此操作，您需要暂时将每个div的高度重置为auto，以便之前的任何设置都不会弄乱你的.each()循环。此外，您需要每次都将可变maxheight重置为0，因为之前的值仍在其中。

这就是你想要的吗？

Answer 2

1）除非我将其调整到非常小的尺寸，否则我看不到它重叠。对于非常小的屏幕（如移动设备），您应该考虑为display:block;添加media query，这样列就会变成行。

使用以下媒体查询检查代码的updated fiddle：

@media only screen and (max-width:400px /*change it to your needs*/) {
    #one, #two, #three, #four {
        float:none; display:block; width:100%; margin:1% 0; height:auto !important;
    }
}

另外，为了防止文本在调整窗口大小时重叠，请将jQuery函数包装到：

$(document).on('load resize',function(){
    /* do the resizing stuff */
});

2）$(window).load将等到您网页的每个元素（内部和外部）都已加载，因此通常$(document).ready更可取，但这取决于您的具体情况

在流体布局上使用Jquery尝试相等高度的列 - 文本溢出。 :(

2 个答案: