使浮动div的高度相同

Question

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

我做了一个小提琴来展示。我希望红色和蓝色的div高度相同…

这是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

您可以尝试使用float来代替使用floatdisplay:table-cell。但是，您可能会发现某些较旧的浏览器不了解此规则。见下文：

#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;
}