0

我正在使用 JS 计算包含各种大小的文本和图像的三列的高度。

这是我正在使用的 JS：

maxHeight = 0;
$('.equalheight').each(function() {
  maxHeight = Math.max(maxHeight, $(this).outerHeight());
});

$('.equalheight').css({ height: maxHeight + 'px' });

这适用于多个浏览器的桌面，但是，它不适用于某些移动设备。它适用于我的 iPad Mini（最新的 iOS），但不适用于其他人的 iPad 3 或 iPhone。它也不适用于使用股票浏览器的三星 Galaxy S4。

我该如何解决这个问题？

这是有问题的网站。

4

2 回答 2

0

这是@Huangism 对inline-block. 您可以调整柱高进行实验。 http://jsfiddle.net/6WZrM/4/

如果容器 div 具有固定高度，则列将填充到该高度。我用js而不是直接设置列高。也许这种方法适用于您的问题设备。var另外值得考虑的是您之前没有maxHeight，我想某些设备可能会以不同于其他设备的方式处理其范围？

//css
#column1, #column2{
  width: 50%;
  display: inline-block;
  height: 100%;
}

//js
var maxHeight = 0;
$('.equalheight').each(function() {
  maxHeight = Math.max(maxHeight, $(this).outerHeight());
});

$('#container').css({ height: maxHeight + 'px' });
于 2013-07-26T17:55:02.397 回答
0

为此目的有一个 jQuery 插件：https ://github.com/dubbs/equal-height

如果要使所有列的高度相同，请使用：

$('.equalheight').equalHeight();

如果您想按最高位置对它们进行分组，例如。每个容器内：

$('.equalheight').equalHeight({ groupByTop: true });
于 2016-05-23T23:30:12.627 回答