Ba cột CSS - cố định/max/biến rộng

Question

Tôi đang gặp khó khăn về cách bố trí ba cột sau đây để làm việc:

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

đâu:

• Một là. chiều rộng cố định.
• B sử dụng bất kỳ không gian có sẵn trong các thùng chứa không được sử dụng bởi các cột A và C.
• C chứa nội dung có thể thay đổi chiều rộng và cần phải "đẩy" B để có chiều rộng khác nhau .

Dưới đây là nỗ lực hết sức mình vào việc tạo ra này: http://jsfiddle.net/x3ESz/

Tất cả các chủ đề khác mà tôi đã xem xét đề nghị có cả ba như nổi với B sử dụng lợi nhuận để ngăn chặn gói, nhưng điều này không cho phép C để thay đổi kích thước B dựa trên nội dung của C (như một giá trị phải được đưa ra cho lề bên phải của B).

Tôi cũng thực sự muốn tránh sử dụng JS để đạt được điều này.

Answer 1

này có thể dễ dàng được giải quyết bằng adding overflow: hidden để #div_middle và loại bỏ bên lề:

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

Xem:http://jsfiddle.net/thirtydot/x3ESz/1/

này hoạt động trong tất cả các trình duyệt hiện đại và IE7 +.

Answer 2

Bạn có thể sửa chữa nó mà không thay đổi cách bố trí của bạn nếu bạn sử dụng kịch bản này:

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

Answer 3

thậm chí Liệu làm việc với cả hai sidebars biến rộng:

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