1

我知道很多 css 不错的解决方案等...简而言之，我希望它能够工作，关于我是否有填充、边距、没有额外的标记、阴影、背景颜色......所以......我我只是在寻找它的 jquery 版本。

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

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

两个问题：

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

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

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

4

2 回答 2

6

不确定，这是否是您要查找的内容。但是我更改了您的 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();
});

要在调整窗口大小时调整列大小，您需要使用回调 on $(window).resize()，因此我已将您的代码封装到 functionresetHeight中。

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

那是你想要的吗？

于 2012-09-26T10:19:07.903 回答
1

1）除非我将其调整为非常小的尺寸，否则我看不到它重叠。您应该考虑为非常小的屏幕（如移动设备）添加display:block;媒体查询，以便列变成行。

使用此媒体查询检查您的代码的更新小提琴：

@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是可取的，但这取决于您的具体情况。

于 2012-09-26T10:08:21.280 回答