Question

我需要并排有两个相等宽度的div，左列包含一个图像，右列包含动态文本，其中文本div的高度可以在400px到550px之间变化，具体取决于网站的文本大小业主投入。

我需要图像在文本框的末尾与顶部和底部齐平。容器元件具有流动性，能够响应。

期望效果

我现在所拥有的是使用花车将元素排列在一起并且反应良好，但图像不足，如下：

我尝试使用...

将图像设置为左栏中的背景图像

.column-image{
    padding-bottom:100%;
    margin-bottom:-100%;
    background-size:contain;
}

但是除非我调整填充底部数量，否则这仍然会有所不足。当我随着宽高比的变化重新调整浏览器大小时，这将变得无用。

我试图避免使用Javascript来解决这个问题。

Answer 1

对容器使用display:table，对内部div使用display:table-cell。另外，请务必删除float