CSS: Căn giữa, chất lỏng trái, cố định bên phải, bố cục nguồn được sắp xếp với chiều rộng tối thiểu/tối thiểu

Question

Các tiêu đề cho biết. Tôi muốn có một layout CSS 2 cột rằng:

• tập trung - nội dung chính tập trung vào trang
• đã cố định (pixel) đúng cột chiều rộng
• có một cột chất lỏng trái - sử dụng hết tất cả các không gian có sẵn trừ đi chiều rộng cột bên phải
• là nguồn ra lệnh - nội dung cột bên trái đứng trước nội dung cột bên phải trong nguồn HTML
• cho phép có chiều rộng tối thiểu - 760px trong ví dụ của tôi
• cho phép có chiều rộng tối đa - 10 24px trong ví dụ của tôi

Nếu cửa sổ lớn hơn chiều rộng tối đa, nội dung sẽ được căn giữa trên trang ở giá trị lớn nhất. Nếu cửa sổ nhỏ hơn chiều rộng tối đa, nội dung sẽ lấp đầy 100% trang, trừ khi nó nhỏ hơn chiều rộng tối thiểu sẽ làm cho thanh cuộn ngang xuất hiện.

Tôi sẵn sàng sử dụng một số javascript nhỏ để xử lý chiều rộng tối thiểu/tối đa cho các trình duyệt không hỗ trợ các thuộc tính đó (tôi đang xem bạn IE6), nhưng tôi sẵn sàng để phần đó của bố cục làm suy giảm.

Đó là thả chết đơn giản với bảng. Tôi đã xem qua hàng trăm bố cục ví dụ, và không có gì có thể làm tất cả những điều tôi đang yêu cầu, mặc dù có một số điều đến gần. Vấn đề dường như là nhận được một cột bên trái chất lỏng và sắp xếp nguồn theo cùng một kiểu. Tôi đã tìm thấy một số ví dụ về một trái/phải cố định bên phải (đối diện của những gì tôi muốn) với thứ tự nguồn thích hợp, hoặc chất lỏng trái/cố định ngay mà không cần đặt hàng nguồn, nhưng không phải cả hai.

Tôi không quan tâm nếu nó sử dụng phao hoặc lợi nhuận tiêu cực, nhưng tôi muốn tránh vị trí tuyệt đối.

+---------------------------------------+ 
|          | 
| +---------------------------+-----+ | 
| |fluid      |fixed| | 
| |       |  | | 
| |       |  | | 
| +---------------------------+-----+ | 
|          | 
+---------------------------------------+ 

Answer 1

Tôi thực sự khuyên bạn nên xem qua số CSS templates at Dynamic Drive. Bước thứ 5 phải là thứ bạn đang tìm kiếm (Fluid-Fixed). Chỉ cần thêm max-width và min-width vào phần tử vùng chứa chính và bạn sẽ được thiết lập.

FYI, đây là những mẫu thực sự tốt để sử dụng làm cơ sở cho bố cục trang của bạn. Chơi với CSS là một cách tuyệt vời để tìm hiểu rất nhiều về nổi và định vị, và nó thực sự đã giúp tôi trong những ngày đầu phát triển web.

Answer 2

Bạn đang tìm kiếm một cái gì đó như thế này? (Âm lề + nổi + trật tự nguồn đúng + cố định đúng)

http://blog.html.it/layoutgala/LayoutGala23.html

More bố trí tại các trang chỉ mục: http://blog.html.it/layoutgala/

Và sau đó chỉ cần thêm min/chiều rộng tối đa để chứa.

Answer 3

nỗ lực của tôi: http://www.ryankinal.com/fluid/

Nó không làm việc hoàn toàn, mặc dù đó là chỉ vì kích thước cửa sổ ở rất nhỏ, lợi nhuận tiêu cực của tôi có thể làm cho nội dung để rơi ra khỏi trang.Dưới đây là các lý thuyết:

1. container tại một số tỷ lệ phần trăm
2. cột bên trái ở 100% số container, và lưu hành trái
3. cột bên phải bọc trong 0% chiều rộng, nổi bên phải wrapper
4. cột bên phải ở cố định chiều rộng (200px trong ví dụ của tôi)
5. cột trái và cột bên trái lề phải của nửa chiều rộng của cột bên phải (100px trong ví dụ của tôi)

Vì vậy, cột càng lớn, càng có nhiều khả năng nội dung sẽ bị mất. Nhưng đó là gần như tôi đã nhận được trong một giờ tốt hay lâu hơn. Nó cũng là một chút hackish do gói cột bên phải trong một div không liên quan và lợi dụng tràn: nhìn thấy được.

Nhưng đó là công việc của tôi (hiện tại).