html - 使 float div的高度相同

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

我做了一个小提琴来显示。我希望红色和蓝色的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;
}

最佳答案

您可以尝试使用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;
}

关于html - 使 float div的高度相同，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/16317497/