html - 使 float div具有相同的高度

Question

我有 2 个并排的 div。我不知道他们预先的高度，它根据内容而改变。有没有一种方法可以确保它们始终保持相同的高度，即使其中一个拉伸(stretch)时也只能使用 CSS？

我做了一个 fiddle 来展示。我希望红色和蓝色 div 的高度相同...

http://jsfiddle.net/7RVh4/

这是CSS:

#wrapper {
width: 300px;
}
#left {
    width:50px;
    background: blue;
    float:left;
    height: 100%;  /* sadly, this doesn't work... */
}
#right {
    width:250px;
    background: red;
    float:left;
}

Answer 1

您可以尝试使用 display: table-cell 而不是使用 float。但是，您可能会发现一些较旧的浏览器不理解此规则。见下文:

#wrapper {
    display: table; // See FelipeAls comment below
    width: 300px;
}

#left {
    display: table-cell;
    width: 50px;
    background: blue;
}

#right {
    display: table-cell;
    width: 250px;
    background: red;
}