Vùng chứa tự động CSS giữa float: left & float: right divs

Question

Tôi đang tìm một cách để CSS (3) có thể tự động điều chỉnh chiều rộng của div trung tâm container giữa một div float:left và float:right div.

Div trung tâm cũng cần có bộ min-width, tương tự như google + -> nhà nơi nội dung trung tâm được tự động trang bị giữa các nút điều hướng bên trái và ngăn trò chuyện phù hợp. Sau đó, khi chiều rộng màn hình co lại qua một điểm nhất định (được phát hiện bằng javascript), ngăn trò chuyện thu nhỏ để tiết kiệm dung lượng.

Dưới đây là một hoạt động mock-up để làm cho công việc: http://jsfiddle.net/9vrby/

Ngoài ra, đây là mã css Tôi đang sử dụng hiện nay:

#left{ float:left; width:200px; height:400px; border:1px solid #000; } 

#center{ float:left; width:auto; height:400px; border:1px solid red; } 

#right{ float:right; width:100px; height:400px; border:1px solid blue; } 

Xin vui lòng cho tôi biết nếu bạn cần thêm thông tin, và cảm ơn trước sự giúp đỡ.

Answer 1

Trên #center, hãy thả float: left và thêm overflow: hidden. Ngoài ra, #center cần được di chuyển để cuối cùng trong HTML.

http://jsfiddle.net/thirtydot/9vrby/14/

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

Answer 2

Một mẹo không được sử dụng phao nhưng hiển thị: ô bảng.

http://jsfiddle.net/9vrby/8/

HTML:

<div id='left'></div> 
<div id='center'></div> 
<div id='right'></div> 

CSS:

#left{ display:table-cell; min-width:200px; height:400px; border:1px solid #000; } 
#center{ display:table-cell; min-width:200px; width:100%; height:400px; border:1px solid red; } 
#right{ display:table-cell; min-width:100px; height:400px; border:1px solid blue; } 

Hãy coi chừng, mặc dù phương pháp này không làm việc trong IE7 (và dưới đây, nhưng người vẫn hỗ trợ mà tào lao phải không?). Nhưng có lẽ bạn có thể xem CSS3Pie cho phép bạn sử dụng CSS (3) cho các trình duyệt chính thức không hỗ trợ nó, như IE7. Vì vậy, có lẽ hiển thị: ô bảng sẽ hoạt động tốt.