使浮动div的高度相同

• Z时代
• 2024-01-10
• 分类：问答

我有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;
}

回答：

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

以上是 使浮动div的高度相同 的全部内容， 来源链接： utcz.com/qa/406027.html