html - 如何将其设置为分配左 div 与屏幕的剩余大小一样多？

Question

我对 html 中的 div 有疑问。我有一个屏幕，我已将 right_div 和 center_div 从右侧设置为固定大小。如何将其设置为分配左 div 与屏幕的剩余大小一样多？

.right_div{
    width: 90px;
    height: auto;
    float:right;
}
.center_div{
    width: 500px;
    height: 100%;
    float:right;
    right:90px;
}
.left_div{
here
}

标签： htmlcss

Answer 1

只需设置所有这 3 个 div 的父 div

.parent_div {
    display: flex;
}

然后对于 left_div

.left_div {
    flex-grow: 1;
}

并从其他 div 中删除 float 属性，即更新的代码是这样的

.parent_div {
    display: flex;
}

.right_div{
    width: 90px;
    height: auto;
}

.center_div{
    width: 500px;
    height: 100%;
}

.left_div {
    flex-grow: 1;
}