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

Question

我遇到麻烦了以下三栏布局的工作：

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

其中：

• 一个是。固定宽度。
• 乙使用未使用的列A和C.
• Ç含有可改变的宽度和需要“推” B到 不同宽度的内容容器中的任何可用的空间。

下面是在创造我的最好的尝试： http://jsfiddle.net/x3ESz/

所有其他的主题我看过建议有三个与使用利润来防止包装乙浮动，但不允许C根据C的内容调整B的大小（因为必须给出B的右边距）。

我也很想避免诉诸JS来实现这一目标。

Answer 1

这可以很容易地通过adding 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; 
}