如何使右div高度等于动态大小的左div？

Question

请参阅下面的自包含示例

我想要做的图片，以及我实际得到的图片：

我想创建css规则，以便我的内容看起来像这样（正确）：

我很难在网上找到一个简单的解决方案，所以我的内容看起来像这样（错误）：

我想要实现的目标摘要：

我无法在stackoverflow或任何css博客上找到解决方案来解决类似但不兼容的问题。

我有两个浮动的div，在行div上左右。左侧div包含一个向外延伸的图像，直到它是左侧div的宽度。左div的高度取决于它包含的img。这是我希望正确的div符合的高度。我需要这种一致性，以便当右侧div上没有空间时，溢出：隐藏代码将隐藏多余的文本。

不允许使用固定高度。 我正在努力避免使用Java Script 。纯CSS中有解决方案吗？

CSS代码段

.left {
    float:left;
    width:50%   
}

.right {
    float:right;
    width:50%;
    background-color:darkgrey;
    overflow:hidden;
}

img {
    min-width:100%;
    height: auto;
    width: 100%;    
}

正如你所看到的，我在这里没有任何代码可以处理相同的div高度，因为我尝试过的所有解决方案都没有用。

这是我的jsfiddle所以你可以看到问题：

http://jsfiddle.net/1upodwg9/

Answer 1

<强>小提琴

http://jsfiddle.net/1upodwg9/14/

.child-row {
        display:block;//added
        background:red;
    }

    .left {
        float:left;
        width:50%;
        height:100%;//added
        display:inline-block;//added

    }

    .right {   
        width:50%;
        background-color:darkgrey;
    display: inline-block;//added
    }

当你有更多内容时，

小提琴示例

http://jsfiddle.net/1upodwg9/15/

Answer 2

像fiddle这样的东西？

 $(window).resize(function () {
 var height = $("#leftDiv").css("height")
 $("#rightDiv").css("height", height);
 });

Answer 3

如果您只使用IE8 +和/或现代浏览器，则可以使用 display：table ， display：table-row ， display：table-细胞

.parent {
    margin: auto;  /* helps place in middle */
    width: 70%;
    display: table;
}

.child-row {
    display: table-row;
}

.child-col {
    display: table-cell;
    vertical-align: top;
}

示例：http://jsfiddle.net/1upodwg9/16/

（抱歉，由于某些原因我没有加载图像cos，因此我没有加载）

编辑：实际上，它不适用于图片太小的时候（右边的col会设置高度）

Answer 4

要使用overflow: hidden;，容器需要一个定义的高度，否则它不知道溢出开始的位置。由于你想拥有一个动态图像（具有不同的高度），我担心你必须使用javascript。