Question

基本上我有2个DIV。一个具有固定的宽度。现在我希望另一个占用剩余的宽度。

我只能通过将浮动放在fixed-width-div上来实现这一点 - 对我来说这是右边的那个。但它只适用于我在我的HTML中交换DIV（右边的第一个）。我不喜欢这样。

那么有没有办法让这个确切的设置，但不必在我的HTML中交换DIV？

这里是一个澄清的JSFiddle

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;，我认为它可以满足您的需求。

Fiddle

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>

让Div占用剩余的宽度

3 个答案: