使用CSS的表行的高度相同

Question

我有N行内容,用户应使用拖放匹配(用户将项目右侧的项目移动到左侧的相应项目).这是一个例子:

所有块应具有相同的高度 - 最大项目的高度.(在此示例中,大项目位于左侧,#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 库添加到您的代码中。