css - 2 列 div 布局 : right column with fixed width, 左流体

Question

我的要求很简单: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

移除左列的 float 。

在 HTML 代码中，右列需要在左列之前。

如果右边有一个 float (和一个宽度)，如果左边的列没有宽度也没有 float ，那么它就是灵活的:)

同时对外部 div 应用 overflow: hidden 和一些高度(可以是自动的)，以便它包围两个内部 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/