三欄的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; 
}