三列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

甚至可以使用兩個可變寬度的側邊欄：

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

Answer 3

如果您使用此腳本，則可以在不更改布局的情況下修復它：

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