Question

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

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

尝试DEMO

Answer 2

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

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

更好的一个，jfiddle

Answer 3

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

调整.col4

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

或

使用CSS3计算Calc Col4

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

填补空格最后一个div

3 个答案: