css - 2 个固定宽度的侧边栏，中央 div 填充剩余空间

Question

如何让绿色 div 为 width: 100% 与其他两个 div 在同一行并固定 宽度。

我的想法是让两侧的 div 有固定的宽度，而中间的 div 是 width: 100% (以剩余空间)。

是否可以实现这种情况？

CSS:

.boxMenu {
    width:200px;
    height:40px;
    background-color:#000;
    float:left;
}
.boxConteudoMaster {
    height:40px;
    background-color:#4cff00;
    float:left;
}
.boxNotificacao {
    width:200px;
    height:40px;
    background-color:#000;
    float:left;
}

HTML:

<div class="boxMenu"></div>
<div class="boxConteudoMaster">asd</div>
<div class="boxNotificacao"></div>

JSFIDDLE HERE

Answer 1

我想你是这样的:

HTML:

<div class="boxMenu"></div>
<div class="boxNotificacao"></div>
<div class="boxConteudoMaster">Testing...</div>

CSS:

.boxMenu {
    width:200px;
    height:40px;
    background-color:#000;
    float:left;
}
.boxConteudoMaster {
    height:40px;
    background-color:#4cff00;
    width: 100%;
}
.boxNotificacao {
    width:200px;
    height:40px;
    background-color:#000;
    float:right;
}

所以我们可以 float 我们想要固定的 2 个 div(float:left 和 float: right)，然后在 put 之后中间 div 到 width: 100%。

DEMO HERE