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

Question

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>

fiddle

https://jsfiddle.net/0ty3o56u/

在上面的例子中，C 如何将所有剩余的可用空间都移到左边？

Answer 1

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

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

通过定位，您可以将元素放置在彼此之上，这样，您可以让元素 C 填满整个屏幕，并让元素 a 和 b位置在它上面。可悲的是，我没有办法给 div 一个流动的宽度，稍后可能会回来。