css - 填充最后一个 div 的空白空间

Question

我在主 div 中有 4 个 div。全部都向左浮动，最后一个留下一个空白空间。我想用最后一个 div（全宽）填充那个空间。

http://jsfiddle.net/jZpWf/26/

<div id="container">
    <div class="col1">
    </div>
    <div class="col2">
    </div>
    <div class="col3">
    </div>    
    <div class="col4">
    </div>    
</div>

#container {
    width: 600px;
    height: 200px;
    background:yellow;
}
.col1 {
    float:left;
    width:90px;
    height: 200px;
    background:red;
}
.col2 {
    float:left;
    width:130px;
    background:blue;
height: 200px;    
}
.col3 {
    float:left;
    width:130px;
    background:red;
    height: 200px;
}
.col4 {
    float:left;
    width:130px;
    background:blue;
    height: 200px;
}

Answer 1

只是不要让它向左浮动并使其 100% 填满所有剩余空间。

.col4 {
    background:blue;
    height: 200px;
}

尝试演示

Answer 2

.col4 {
    float:left;
    width: 250px;
    background:blue;
    height: 200px;
}

简单的答案，很快就会更好......

更好的一个，jfiddle

Answer 3

div的宽度总和与可用的总大小不对应，因此不要占用总面积，这可以使用百分比方法或CSS3 calc来完成

调整 .col4 的大小

.col4 {
    float:left;
    width:250px;
    background:blue;
    height: 200px;
}

或者

使用 CSS3 计算 Col4

.col4 {
    float:left;
    width: calc(100% - 350px);
    background:blue;
    height: 200px;
}