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

我终于找到了解决方案。以上代码中添加了一些可以使其正常工作的代码：

＆＃13;

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*/
}

＆＃13;

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

＆＃13;

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

Answer 2

你需要在左（流体）div之前放置右浮动div并向右添加float到#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 3

尽管Pema完美地回答了他/她的问题，但这是另一个简单的方法，没有改变标记，可以归结为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具有固定宽度

3 个答案: