使div填充所有剩余/可用宽度

时间:2015-03-01 08:58:13

标签: html css width

CSS

#floatright_a {
    background-color: #c0c0c0;
    float: right;
}
#floatright_b {
    background-color: #ffc0ff;
    float: right;
}
#floatright_c {
    background-color: #c0ffc0;
    /*float: right;*/
}

HTML

<div id="floatright_a">A</div>
<div id="floatright_b">B</div>
<div id="floatright_c">C</div>

拨弄

https://jsfiddle.net/0ty3o56u/

鉴于上面的例子,C如何将所有剩余的可用空间带到左边?

1 个答案:

答案 0 :(得分:-1)

&#13;
&#13;
#floatright_a {
    background-color: #c0c0c0;
    position:absolute;
    right:0;
    z-index:1;
    right:10px;
}
#floatright_b {
    background-color: #ffc0ff;
    position:absolute;
    right:0;
    z-index:1;
}
#floatright_c {
    background-color: #c0ffc0;
    float: right;
    width:100%;
    position:relative;
    z-index:0;
}
&#13;
<div id="floatright_c">C</div>
<div id="floatright_a">A</div>
<div id="floatright_b">B</div>
&#13;
&#13;
&#13;

通过定位,您可以将元素放在彼此的顶部,这样,您可以让元素C填满整个屏幕,并在其顶部放置元素ab。可悲的是,我没有办法给div一个流畅的宽度,可能会在以后回来。