并排 div 其中右侧 div 具有固定宽度

Question

我在#container 中有两个div，#left 和#right。左边的 div 是流动的。右边的div宽度固定。在调整浏览器大小时，如何让左边的 div 缩小或扩大，而右边的 div 保持不变？似乎无法完成这项工作。令人惊讶的是，相反的（左 div 固定，右 div 流体）很容易。

在此先感谢您的帮助。这是代码：

#container {
    width: 80%;
    height: 200px;
    margin: 0 auto;
    border: 1px solid grey;
}

#left {
    height: 100px;
    background-color: red;
}

#right {
    width: 100px;
    height: 100px;
    background-color: green;
}

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

CSS:

Answer 1

您需要将右侧浮动 div 放在左侧（流体）div 之前，并将右侧浮动添加到 #right

这是工作示例 http://jsfiddle.net/936u0d3b/

#container {
    width: 80%;
    height: 200px;
    margin: 0 auto;
    border: 1px solid grey;
}

#left {
    height: 100px;
    background-color: red;
}

#right {
    width: 100px;
    height: 100px;
    background-color: green;
    float:right;
}

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

Answer 2

我终于找到了解决办法。这是上面的代码，添加了一些使其工作的代码：

div {
    margin: 0px;
}

#container {
    width: 80%;
    height: 200px;
    margin: 0 auto;
    border: 1px solid grey;   
}

#left {
    width: 100%;
    height: 100px;
    background-color: red;
    float: left; /*Add This*/ 
    margin-right: -200px; /*Add This*/ 
}

/*Add This new Div*/ 
#inside {
    margin-right: 200px; /*Add This*/
}

#right { 
    width: 100px;
    height: 100px;
    background-color: green;
    float: right; /*Add This*/
}

<div id="container">
    <div id="left">
        <div id="inside">    <!--Add This-->  
        </div>
    </div>
    <div id="right">
    </div>
</div>

这是对我有帮助的网站：http://alistapart.com/article/negativemargins

Answer 3

虽然 Pema 完美地回答了 his/her 问题，但这里有另一种不更改标记的简单方法，适用于 IE9：

CSS:

#container {
    width: 80%;
    height: 200px;
    margin: 0 auto;
    border: 1px solid grey;
}

#left {
    width: calc(100% - 100px); /* added */
    float: left; /* added */
    box-sizing: border-box; /* added */
    height: 100px;
    background-color: red;
}

#right {
    float: right; /* added */
    box-sizing: border-box; /* added */
    width: 100px;
    height: 100px;
    background-color: green;
}

HTML:

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

并排 div 其中右侧 div 具有固定宽度

Side by side div where right div has fixed width

css

fluid-layout