右侧 div 具有固定宽度的并排 div答案

【问题标题】：Side by side div where right div has fixed width右侧 div 具有固定宽度的并排 div
【发布时间】：2015-11-09 03:12:40
【问题描述】：

我在#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：

【问题讨论】：

2 column div layout: right column with fixed width, left fluid的可能重复
是否支持 IE9 或之前的要求？如果不是Flexbox，那么这样的布局会变得更加容易
@ Amos 该链接中的解决方案并不完美，因为它需要更改 html 文件中 div 的顺序。 @gapple 我不想使用 Flexbox。 :)
@Pema：如果您费心查看重复问题的 answer with the second-most votes，您会发现它引用了与您完全相同的 alistapart 文章声明解决了您的问题...
@Amos：我确实费心去看。我第一次阅读它时并没有注意到它，因为它是评分第二高的答案，也是一个外部链接。当我确实阅读了那篇文章时，我在此处发布了答案，以便其他人更容易找到。所以，放松吧。

标签： css fluid-layout

【解决方案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

【讨论】：

出色的跨浏览器安全解决方案！适用于 IE8，甚至可能低于 IE8。谢谢！

【解决方案2】：

您需要将右侧浮动 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>

【讨论】：

有没有办法在不改变 div 顺序的情况下做到这一点？
如果您可以使用表格、表格单元格样式。检查这个jsfiddle.net/sabinprakash/936u0d3b/1

【解决方案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>

【讨论】：