javascript - 使用 CSS 的表行高度相同

Question

我有 N 行内容，用户应该使用拖放来匹配这些内容(用户将右侧的元素移动到左侧的相应元素)。这是一个例子:

所有的 block 应该有相同的高度——最大的 block 的高度。 (在这个例子中，大件元素在左边，#2)。可以使用纯 CSS 吗？由于浏览器支持，我不能使用 flexbox。我已经设法使用 JS 实现了这个，但我不喜欢那个解决方案:)

也许有人可以向我指出该技术或类似示例？

提前致谢。

Answer 1

试试这个 jquery 代码，它检测最大的元素并将它们全部设置为那个高度。

var height = 0;
$(".table").find(".table-cell").each(function() {
    height = Math.max(height, $(this).height());
});

$(".table").find(".table-cell").css("height", height);

这是一个JSfiddle示例。

为此您需要 jquery，因此请确保将 jquery 库添加到您的代码中。