css - 三列 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+。

Answer 2

如果您使用此脚本，您可以在不更改布局的情况下修复它：

$(document).ready(function() {
    $('#div_right').click(function() {
        $(this).append('--');
        $('#div_middle').css("margin-right", $('#div_right').width() + 2 +"px");
    });
});

Answer 3

甚至可以使用两个可变宽度的侧边栏：

http://jsfiddle.net/QG2EU/

#div_left{
    float:left;
    border:1px solid #F00;
}
#div_middle {
    overflow: hidden;
    border:1px solid #0F0;
}
#div_right {
    float:right;
    border:1px solid #00F;
}