css - 并排 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 {
    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