2列div布局：右列有固定宽度，左侧流体

Question

2列div布局：右列有固定宽度，左侧流体

我的要求很简单：2列，右列有固定大小。不幸的是，我无法在stackoverflow和Google上找到有效的解决方案。如果我在自己的上下文中实现，那么每个解决方案都会失败 目前的解决方案是：

div.container {
    position: fixed;
    float: left;
    top: 100px;
    width: 100%;
    clear: both;}#content {
    margin-right: 265px;}#right {
    float: right;
    width: 225px;
    margin-left: -225px;}#right, #content {
    height: 1%; /* fixed for IE, although doesn't seem to work */
    padding: 20px;}

<div class="container">
    <div id="content">
        fooburg content    </div>
    <div id="right">
        test right    </div></div>

我用上面的代码得到以下内容：

|----------------------- -------|

| fooburg content  |            |

|-------------------------------|

|                  | test right | 

|----------------------- -------|

请指教。非常感谢！

Answer 1

删除左列上的浮动。在HTML代码中，右列需要在左侧列之前。如果右边有一个浮点数（和一个宽度），如果左边的列没有宽度而且没有浮动，那么它将是灵活的:)同时将一个overflow: hidden高度（可以是自动）应用于外部div，以便它包围两个内部div。最后，在左栏中添加一个width: auto和overflow: hidden，这使得左列独立于右侧（例如，如果您调整了浏览器窗口的大小，右侧列触及左侧列，没有这些属性，则左列将运行围绕右边的一个，这个属性保留在它的空间中）。示例HTML：<div&nbsp;class="container"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="right"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;right&nbsp;content&nbsp;fixed&nbsp;width&nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;class="left"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;left&nbsp;content&nbsp;flexible&nbsp;width&nbsp;&nbsp;&nbsp;&nbsp;</div></div>CSS：.container&nbsp;{ &nbsp;&nbsp;&nbsp;height:&nbsp;auto; &nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;}.right&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;180px; &nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;right; &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#aafed6;}.left&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;float:&nbsp;none;&nbsp;/*&nbsp;not&nbsp;needed,&nbsp;just&nbsp;for&nbsp;clarification&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;background:&nbsp;#e8f6fe; &nbsp;&nbsp;&nbsp;&nbsp;/*&nbsp;the&nbsp;next&nbsp;props&nbsp;are&nbsp;meant&nbsp;to&nbsp;keep&nbsp;this&nbsp;block&nbsp;independent&nbsp;from&nbsp;the&nbsp;other&nbsp;floated&nbsp;one&nbsp;*/ &nbsp;&nbsp;&nbsp;&nbsp;width:&nbsp;auto; &nbsp;&nbsp;&nbsp;&nbsp;overflow:&nbsp;hidden;}示例：http：//jsfiddle.net/jackJoe/fxWg7/

Answer 2

最好避免在左前方放置右列，只需使用负右边距。并通过包含@media设置来“响应”，因此右侧列在窄屏幕上位于左侧。<div&nbsp;style="background:&nbsp;#f1f2ea;"> &nbsp;&nbsp;<div&nbsp;id="container"> &nbsp;&nbsp;&nbsp;&nbsp;<div&nbsp;id="content"> &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;<strong>Column&nbsp;1&nbsp;-&nbsp;content</strong> &nbsp;&nbsp;&nbsp;&nbsp;</div> &nbsp;&nbsp;</div> &nbsp;&nbsp;<div&nbsp;id="sidebar"> &nbsp;&nbsp;&nbsp;&nbsp;<strong>Column&nbsp;2&nbsp;-&nbsp;sidebar</strong> &nbsp;&nbsp;</div><div&nbsp;style="clear:both"></div><style&nbsp;type="text/css">#container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;margin-right:&nbsp;-300px; &nbsp;&nbsp;&nbsp;&nbsp;float:left; &nbsp;&nbsp;&nbsp;&nbsp;width:100%;}#content&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;margin-right:&nbsp;320px;&nbsp;/*&nbsp;20px&nbsp;added&nbsp;for&nbsp;center&nbsp;margin&nbsp;*/}#sidebar&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;width:300px; &nbsp;&nbsp;&nbsp;&nbsp;float:left}@media&nbsp;(max-width:&nbsp;480px)&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;#container&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-right:0px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-bottom:20px; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;#content&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;margin-right:0px; &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;width:100%; &nbsp;&nbsp;&nbsp;&nbsp;} &nbsp;&nbsp;&nbsp;&nbsp;#sidebar&nbsp;{ &nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;clear:left; &nbsp;&nbsp;&nbsp;&nbsp;}}</style>