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

Question

我在主div中有4个div。所有div都是浮动的，最后一个留下空白。我想用最后一个div (full width)填充这个空格。

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

或

Calc Col4 with CSS3

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