使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>