Question

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

图像自然高度＆lt; 60px ==容器DIV高60 px

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

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

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

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

这是我的js片段：

    $('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像素，这样这些容器DIV在每一行上都可以有不同的高度。但正如我上面所写，我需要为每一行上的所有三个图像容器设置相同的值。在上面的HTML示例中，所有DIV应该是104像素高，因为其中一个图像超过60像素。如何修改我的代码段以执行我想要的操作？

EDITED：对于具有类.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％的height属性。这将使它们的大小与它们所包含的单元格的大小相同。单元格将自动调整为最大图像的大小，因此所有单元格的高度都相同。

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

1 个答案: