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

Question

我在使用以下三列布局时遇到问题:

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

地点:

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

这是我创建它的最佳尝试: http://jsfiddle.net/x3ESz/

我看过的所有其他主题都建议让所有三个都与 B 一起 float ，使用边距以防止换行，但这不允许 C 根据 C 的内容调整 B 的大小(因为必须为 B 的右边给出一个值 margin )。

我也很想避免使用 JS 来实现这一点。

Answer 1

这可以通过 adding overflow: hidden 轻松解决到 #div_middle 并移除边距:

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

参见: http://jsfiddle.net/thirtydot/x3ESz/1/

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