使Div占用剩余寬度

Question

基本上我有2個DIV。 一個具有固定的寬度。 現在我要讓另一個占用剩余的寬度。

我只能通過將float放在fixed-width-div上來實現這一點-對我來說，這是右邊的那個。 但是，只有當我換出HTML中的DIV時才起作用（正確的是第一個）。 我不喜歡這樣。

因此，有什么方法可以進行此准確的設置，而不必交換HTML中的DIV？

這是一個澄清的JSFiddle

https://jsfiddle.net/MHeqG/1862/

HTML（當我先將左DIV插入時，浮點符會中斷）

<div id="wrap">
    <div id="right">
        right
    </div>
    <div id="left">
        left
    </div>
</div>

的CSS

#wrap {
    width: 300px;
}
#left {
    width: 100%;
    background-color:#ff0000;
}
#right {
    float: right;
    width: 50px;
    background-color:#00FF00;
}

Answer 1

您可以嘗試使用display:flex; ，我認為它可以滿足您的需求。

小提琴

Answer 2

您可以使用CSS calc()函數

 #wrap { width: 300px; } #left { width: calc(100% - 50px); background-color:#ff0000; } #right { float: right; width: 50px; background-color:#00FF00; } 

 <div id="wrap"> <div id="right"> right </div> <div id="left"> left </div> </div> 

Answer 3

這行得通嗎？

https://jsfiddle.net/MHeqG/1864/

CSS：

#wrap {
    position:relative;
    width: 300px;
}
#left {
    margin-right:55px;
    background-color:#ff0000;
}
#right {
    position:absolute;
    top:0;
    right:0;
    width: 50px;
    background-color:#00FF00;
}

HTML：

<div id="wrap">
    <div id="left">
        left
    </div>
    <div id="right">
        right
    </div>
</div>