动态地使两个浮动div具有相同的高度

Question

情况：我有一个有两个直接孩子的容器，我们称之为左和正确 。
绝不应允许左延伸超过右的高度，但是正确应该允许延伸超过左的身高。

我无法弄清楚如何使用CSS（希望保持标记的简单性）

示例html

<div class="wrapper">
    <div class="left">
        left
    </div>
    <div class="right">
        right
    </div>
</div>

示例css

.wrapper {
    display: inline-block;
    margin: 10px 0;
}
.left {
    float: left;
    width: 60px;
    background-color: #999;   
}
.right {
    float: left;
    width: 540px;
    border: 4px solid #666;
    padding: 8px;
}

or see what I mean here

Answer 1

这是一个常见的问题。问题是，你需要一个CSS /背景图像技巧或使用JavaScript。一个常用的是Faux Columns。

Answer 2

是的，你需要依赖JavaScript来解决这类问题，你可以随时根据右列的高度设置左列的最小高度，或类似的东西！

使用jQuery，这可能会帮助您入门！ http://www.cssnewbie.com/equal-height-columns-with-jquery/