Question

我要做的是创建一个包含2列表的页面。左侧的列显示了许多数据（此部分工作正常），右侧的列将具有并排显示2个图像的div（这也有效）。问题是右侧div中的图像不会扩展以填充左表列的整个高度。如果我查看调试器中的内容，我可以看到我的左表列（例如）高度为440px。但是，正确的div总是高300像素。由于我的img是45x300px，我猜div在某种程度上继承了这个。我一直在使用CSS一段时间，但不会认为自己是专家，所以我真的认为有一些关于如何继承我失踪的高度。这个html看起来如下所示：

<div>
    <table>
        <tr>
            <td class="left-outer">
                <!-- left side content goes here -->
                <p>Test 1....</p>
                ...
            </td>
            <td class="right-outer">
                <div class="right-outer-2images">
                    <div class="right-outer-2images-img1">
                        <img border="0" src="http://people.sc.fsu.edu/~jburkardt/data/gif/fish.png" alt="Report Image Bar" />
                    </div>
                    <div class="right-outer-2images-img2">
                        <img border="0" src="http://people.sc.fsu.edu/~jburkardt/data/gif/czoch.png" alt="Report Image Bar" />
                    </div>
                </div>
            </td>
        </tr>
    </table>
</div>

CSS：

.left-outer {
    border-style: solid;
    border-color: green;
    width: 20%;
}
.right-outer {
    border-style: solid;
    border-color: red;
    width: 80%;
    /*display: inline-flex;
     justify-content: flex-start;*/
    height: 100%;
}
.right-outer-2images {
    float: left;
    height: 635px;  /* This works but is not ideal */
    /*height: 100%;*/ /* This does not work but I believe should */
    width: 98%;
    border-style: solid;
    border-color: blue;
    /*vertical-align: text-top;*/
}
.right-outer-2images-img1 {
    float: left;
    width: 30%;
    height:100%;
    /*border-style: solid;*/
    border-color: orange;
}
.right-outer-2images-img2 {
    float: left;
    width: 70%;
    height: 100%;
    /*border-style: solid;*/
    border-color: yellow;
}
.right-outer-2images-img1 img,
.right-outer-2images-img2 img {
    float: left;
    width: 100%;
    height: 100%;
}

因此，左外（表格列）内容的高度将始终大于图像，我希望图像被拉伸到相同的高度并显示在右外表格列中。使用上面的CSS示例，如果我明确地将 right-outer-2images div的高度设置为实际高度，那么一切似乎都有效，但如果我将高度设置为100％（或继承）它会不行。我在jsFiddle（http://jsfiddle.net/a98w683u/）中放了一个样本，请看看，让我知道我做错了什么。

Answer 1

您的代码不起作用，因为从未为您的表格单元格或表格定义高度。因此，您的height:100%声明不知道100％是什么。如果您在.right-outer声明中设置高度，它将起作用：

DEMO EXAMPLE

需要对这3个声明进行更改：

.right-outer {
    border-style: solid;
    border-color: red;
    width: 80%;
    height: 100px; /* this is more of a starting height as the left column will stretch it  */
}
.right-outer-2images {
    float: left;
    height: 100%; /* don't forget to change this back to 100% */
    width: 98%;
    border-style: solid;
    border-color: blue;
}
.right-outer-2images-img1 {
    height:100%; /* Updated; add this back in */
    float: left;
    width: 30%;
    border-color: orange;
}

无法获得2个图像以扩展以填充父div

1 个答案: