列表中等高的项目答案

【问题标题】：Equal height items in a list列表中等高的项目
【发布时间】：2022-05-02 23:16:28
【问题描述】：

我希望列表中的所有元素高度相等。为此，我使用了jquery.matchHeigh 插件。但是，所选项目不会自动更新

调整屏幕大小时：

我希望自动更新尺寸，但我只有在更新时才会得到这个结果

页面：

我正在使用基本功能：

$('.product-info .product-name').matchHeight({ property: 'min-height' });

完整代码为here。

我正在使用Owl Carousel 作为列表。

【问题讨论】：

您可以将matchHeight(); 函数放在$(window).on("resize", function() { //here } ) 事件中，但取决于matchHeight 的工作方式，这可能是一场性能噩梦。为什么不直接使用 CSS？
@Santi 插件监听这些事件。您提供的演示按预期工作。
@IvankaTodorova 对我来说不是。一旦我压缩窗口，所有项目都会错位。但是，当我 put it in a listener 它工作得很好。 编辑： 更正，包含的示例在释放窗口时似乎有一点延迟，但它确实似乎最终将它们对齐。
@Santi 谢谢！我在这里测试过，问题似乎还在继续：imgur.com/a/znXuf
如何调整窗口大小？ @IvankaTodorova 我现在注意到，如果您双击窗口标题而不是拖动窗口大小，OP 的示例和我自己的示例都不起作用。

标签： javascript html jquery css height

【解决方案1】：

这里的问题似乎只是窗口调整大小和实际window.resize 事件触发之间的滞后时间问题。通过将事件包装在窗口调整大小并添加轻微的超时，我设法解决了这个问题：

var lagTime = 500;   //Play around with this number
$(window).on("resize", function() {
    setTimeout(function() {
    $('.product-info .product-name').matchHeight({
        property: 'min-height'
    })}
    , lagTime);
}).trigger("resize");

请注意，我还在其末尾添加了一个 .trigger()，它会在页面加载时触发一次 resize 事件。

考虑根据需要减少 lagTime 变量，您应该能够摆脱比我在此示例中使用的 500 更低的值。

【讨论】：

谢谢！我再次阅读插件文档，发现以下文章：github.com/liabru/jquery-match-height/issues/…。结合您的回答，我相信我达到了预期的结果。看一看：jsfiddle.net/5x1pnwyg/15

【解决方案2】：

我再次阅读了jquery.matchHeigh plugin documentation 并找到了这个article。结合Santi的回答，我相信我达到了预期的结果：

// the original group of .product-info .product-name
$('.product-info .product-name').matchHeight({ property: 'min-height' });

// on rezise event
$(window).on("resize", function() {

  setTimeout(function() {

  // remove the old group
  $('.product-info .product-name').matchHeight({ remove: true });

  // apply matchHeight on the new selection, which includes the new element
  $('.product-info .product-name').matchHeight();

  }, 250);

})

查看最终代码here。谢谢大家！

【讨论】：

【解决方案3】：

在你的 CSS 中使用 flexbox 是一种选择吗？如果是这样，将display: flex; 添加到父元素，所有子元素的高度都将相等。您将需要使用嵌套在其中的哪些子元素需要 position: absolute; 等，但这可以通过 CSS 完成，而无需修改 HTML 标记。

我在这里有一个更简化的 codepen 演示：https://codepen.io/anon/pen/wjyVyZ

【讨论】：