三栏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来实现这一点。

- Alex

Answer 1

通过在#div_middle上添加overflow: hidden并删除边距，可以很容易地解决这个问题：参考链接

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

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

在所有现代浏览器和IE7+中均可使用。

- thirtydot

---

比我预期的要简单得多。完美地运作着。非常感谢！ - Alex

Answer 2

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

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

- Sven Bieder

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;
}

- Alexander