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>

拨弄

https://jsfiddle.net/0ty3o56u/

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

Answer 1

＆＃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;

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

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

1 个答案: