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 class="container">
    <div class="right">
        right content fixed width    </div>
    <div class="left">
        left content flexible width    </div></div>

CSS：

.container {
   height: auto;
   overflow: hidden;}.right {
    width: 180px;
    float: right;
    background: #aafed6;}.left {
    float: none; /* not needed, just for clarification */
    background: #e8f6fe;
    /* the next props are meant to keep this block independent from the other floated one */
    width: auto;
    overflow: hidden;}

示例：http：//jsfiddle.net/jackJoe/fxWg7/

Answer 2

最好避免在左前方放置右列，只需使用负右边距。

并通过包含@media设置来“响应”，因此右侧列在窄屏幕上位于左侧。

<div style="background: #f1f2ea;">
  <div id="container">
    <div id="content">
        <strong>Column 1 - content</strong>
    </div>
  </div>
  <div id="sidebar">
    <strong>Column 2 - sidebar</strong>
  </div><div style="clear:both"></div>

<style type="text/css">#container {
    margin-right: -300px;
    float:left;
    width:100%;}#content {
    margin-right: 320px; /* 20px added for center margin */}#sidebar {
    width:300px;
    float:left}@media (max-width: 480px) {
    #container {
        margin-right:0px;
        margin-bottom:20px;
    }
    #content {
        margin-right:0px;
        width:100%;
    }
    #sidebar {
        clear:left;
    }}</style>