Làm cách nào để sao chép bố cục 3 cột này mà không cần sử dụng bảng?

Question

Cảm thấy hơi thất vọng khi không thể xác định điều này một cách chính xác. Tôi đang cập nhật trang web cũ và đang cố gắng thực hiện công việc này mà không cần bảng. Tôi có thể làm điều đó với hộp flex nhưng nó không được hỗ trợ bởi rất nhiều trình duyệt. Việc bố trí là một cái gì đó như thế này

[col-1-như-nhỏ-như-có thể] [col-2-nên-use-tất cả-không gian ] [col-3-as-nhỏ-như- có thể]

Cột không cần phải có cùng chiều cao và chiều rộng tổng thể của tất cả 3 cột được kết hợp bị ràng buộc bởi cha mẹ.

Nếu tôi sử dụng phao tôi không thể mở cột giữa. Chiều rộng của col-1 và col-2 là không phải là độ rộng cố định.

Bất kỳ giải pháp nào không cảm thấy tồi tệ hơn thì vấn đề (bảng)?

đây là một ví dụ về các giải pháp dựa trên bảng: http://jsfiddle.net/7dsCV/1/

Answer 1

Đó là một giải pháp kỳ lạ, nhưng thiết overflow: hidden vào giữa div sẽ cung cấp cho bạn những gì tôi tin rằng bạn muốn:

http://jsfiddle.net/qrBXL/

tôi đã có nghĩa là để tìm ra lý do tại sao điều này xảy ra nhưng đã không nhận xung quanh nó chưa. Đoán tốt nhất của tôi là overflow chỉ hoạt động trên các thùng chứa hình chữ nhật và nổi gói trong phạm vi div làm cho nó về cơ bản không phải hình chữ nhật.

Answer 2

Khi bạn nói "nhỏ càng tốt" Tôi vẫn cho rằng họ có chiều rộng cố định. Sẽ rất tệ khi có độ rộng khác nhau giữa các trang. Điều đó đang được nói, bạn có thể xem bài viết này để có một ví dụ rất hay về bố cục xử lý rất nhiều vấn đề: http://www.alistapart.com/articles/holygrail/ Nếu bạn không muốn trải qua tất cả, cuối cùng bạn có tất cả mã, sẵn sàng để được sao chép & dán.