如何将所有 DIV 设置为与同一表格行中的所有 DIV 相同的高度？

Question

我有一个包含三列的 html 表。每个表格单元格包含具有不同内容的 DIV，其中一个包含图像。我有一个小的 JS 函数，可以将图像 DIV 容器的高度设置为 2 个可能的高度之一。

图像自然高度

图像自然高度 > 60 像素 = 容器 DIV 高度为 104 像素

现在我需要弄清楚如何在每个表格行上将所有三个图像 DIV 设置为相同的高度。

只有小图像的行 = 所有三个图像 DIV 都应设置为 60 像素。

包含一个或多个大图像的行 = 所有三个图像 DIV 都应设置为 104 像素。

这是我的 js sn-p:

    $('div.givarbild img').each( function() {
        var container = $(this).closest('div.givarbild');
        $("<img>").attr("src", $(this).attr("src")).load(function(){
            var picHeight = this.height;
            console.log(picHeight);
            if(picHeight < 60){
                container.height(60);
            }else{
                container.height(104);
            } 
        });
    }); 

HTML

<tr>
    <td>
        <div class="givarbild"">
            <img width="100" height="50" src="image path">
        </div>
    </td>
    <td>
        <div class="givarbild"">
            <img width="150" height="50" src="image path">
        </div>
    </td>
    <td>
        <div class="givarbild"">
            <img width="90" height="90" src="image path">
        </div>
    </td>
</tr>

我的 jquery/JS 函数只将当前图像 DIV 设置为 60 或 104 px，这样这些容器 DIV 可以在每一行上具有不同的高度。但正如我上面写的，我需要为每行的所有三个图像容器设置相同的值。 在上面的 HTML 示例中，所有 DIV 的高度应为 104 像素，因为其中一张图像超过 60 像素。如何修改我的代码 sn-p 来做我想做的事？

编辑： 我不能对具有类.givarbild 的 DIV 使用 100% 高度，因为我还希望图像在每一行的 DIV 中垂直居中。使用此 css 获得垂直居中（为了使用 max-height: 100%，容器必须设置为 px 值：

div.givarbild {
    height:100px; /*this value is overridden by my JS*/
    min-width:190px;
    position: relative;
    margin:10px 0px;  
}

.givarbild img {
    max-height: 100%;  
    width:auto; 
    position: absolute;  
    top: 0;  
    bottom: 0;  
    margin: auto 0; 
}

我查看了 Flexbox，但对于这项任务来说似乎有点过头了？不过我会进一步调查，谢谢你的建议。

Answer 1

按照您已经采用的方式进行...在 html 中，您可以将每个 div 的高度设置为 100%。更好的是，将类 givarbild 设置为具有 100% 的高度属性。这会将它们的大小调整为包含它们的单元格的大小。单元格将自动调整为最大图像的大小，因此所有单元格的高度都相同。