Làm cách nào để tạo bố cục chất lỏng cố định 3 cột?

Question

Tôi đang tìm kiếm một bố trí css 3 cột, với 1 phần cố định ở giữa và 2 bên chất lỏng xung quanh nó:

http://www.uploadup.com/di-UEFI.png

giữa có chiều rộng 250px (ví dụ) và sidebars phải (ở mức tối thiểu Chiều rộng 150px. nếu chiều rộng của trình duyệt dài hơn 550px (250 + 300), thanh bên phải có độ rộng dài hơn. (và giữa luôn là 250px)

CSS có thể làm điều đó là gì? với khả năng tương thích trong tất cả các trình duyệt.

lưu ý: tôi thấy this page, nhưng tôi không biết làm thế nào để thay đổi nó cho mong muốn của tôi

Answer 1

Bạn có thể cố gắng sử dụng inline-block s cho nó. Chúng được sử dụng khá hiếm khi, nhưng đôi khi chúng khá tốt cho bố trí.

Vì vậy, hãy xem điều này: http://jsfiddle.net/kizu/UUzE9/ - với inline-block s bạn có thể tạo bố cục với bất kỳ số cột cố định và chất lỏng nào. Thuật toán:

1. Lúc đầu, bạn thêm phần đệm bằng tổng của tất cả các cột cố định vào trình bao bọc. Trong trường hợp của bạn - 250px.
2. Sau đó, bạn thêm min-width vào trình bao bọc bằng tổng của tất cả các cột chất lỏng 'chiều rộng tối thiểu.
3. Sau đó, bạn thêm white-space: nowrap vào trình bao bọc, vì vậy các cột sẽ không nhảy.
4. Và sau đó chỉ cần thêm tất cả các cột bạn cần.

Nếu bạn cần hỗ trợ cho IE7 và thấp hơn, có một số điều khác bạn nên biết trừ chung inline-block sửa chữa:

1. Bạn phải trả lại white-space: normal cho đứa trẻ bên trong của một cột, hoặc các cột thắng không ở trên một dòng.
2. Có thể xuất hiện một cuộn ảo trong IE, có thể có cách tốt hơn để xóa nó, nhưng tôi chỉ sử dụng overflow: hidden trên một số trình bao bọc.

Enjoy :)

Answer 2

Nếu bạn không sử dụng một trong những mẫu sẵn sàng trên mạng,
Bạn có thể bắt đầu bằng cách ba div nổi trái, giữa với width: 250px và những người bên ngoài với min-width: 150px
Bạn có thể muốn thay thế nó bằng thẻ <section>, chỉ cần cung cấp cho nó một display: block

Answer 3

để thực hiện thi s làm việc trong IE6/7 mà không có JavaScript, cách dễ nhất để làm điều này là với một table.

Tôi biết, tôi biết. Nó không phải là rằng xấu trong trường hợp này, tất cả đều được xem xét.

Xem:http://jsfiddle.net/thirtydot/Q2Qxz/

Tested trong IE6/7 + Chrome, và nó sẽ chỉ làm việc trong tất cả các trình duyệt hiện đại khác.

HTML:

<table id="container" cellspacing="0" cellpadding="0"> 
    <tr> 
     <td id="left">fluid</td> 
     <td id="mid">fixed</td> 
     <td id="right">fluid</td> 
    </tr> 
</table> 

CSS:

html, body { 
    margin: 0; 
    padding: 0; 
    border: 0 
} 
#container { 
    border: 0; 
    table-layout: fixed; 
    width: 100% 
} 
#container td { 
    vertical-align: top 
} 
#mid { 
    width: 250px; 
    background: #ccc 
} 
#left { 
    background: #f0f 
} 
#right { 
    background: #f0f 
}