三列CSS布局 - 固定/最大/可变宽度

Question

我无法使以下三列布局工作:

    A              B              C
+-------+-------------------+------------+
|       |                   |            |
| Fixed | Use unused space  |  Resizable |
|       |                   |            |
+-------+-------------------+------------+

哪里:

• A是固定宽度.
• B使用A和C列未使用的容器中的任何可用空间.
• C包含可能改变宽度并需要将B"推"到不同宽度的内容.

以下是我创建此项目的最佳尝试:http: //jsfiddle.net/x3ESz/

我所看到的所有其他主题都建议将所有三个主题与B一起浮动,使用边距来防止包装,但这不允许C根据C的内容调整B大小(因为必须为B的右边距赋予值).

我也真的想避免使用JS来实现这一目标.

Answer 1

这可以轻而易举地解决添加overflow: hidden到#div_middle和删除边距:

#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}

请参阅: http ://jsfiddle.net/thirtydot/x3ESz/1/

这适用于所有现代浏览器和IE7 +.