css – 拆分两个div之间的可用宽度

| Div1 | Div2 ............... | .............. Div3 | Div4 |

使用overflow：hidden(或overflow：auto – 只要溢出未设置为可见[默认])触发块格式化上下文以填充剩余宽度

(对于div1和div4,我假定固定宽度为100pX)

FIDDLE

标记

<div class="div1">DIV 1</div>
<div class="container">
    <div class="div2">DIV 2</div>
    <div class="div3">DIV 3</div>
</div>
<div class="div4">DIV 4</div>

CSS

html,body,div
{
    height: 100%;
}
.div1 {
    float:left;
    width: 100px;
    BACkground: aqua;
}
.container
{
   overflow: hidden;
   padding-right: 100px;
   box-sizing: border-box;
    BACkground: green;
}
.div2 {
    BACkground:yellow;
    float:left;
}
.div3 {
    BACkground:brown;
    overflow: hidden;
}
.div4 {
    position: absolute;
    right:0;
    top:0;
    BACkground:pink;
    width: 100px; 
}