Có bố cục CSS 3 cột thuần túy đơn giản không?

Một mà không yêu cầu như sau:Có bố cục CSS 3 cột thuần túy đơn giản không?

Reliance trên hình ảnh (tức là "cột giả")
Một số loại weirdness hay "hack" đưa vào đặc biệt cho IE
Yêu cầu IE để chạy ở chế độ quirks
Không có sự kỳ lạ giống như một trong ba DIV trùng lặp với nhau (nghĩa là "chén thánh")
Lề được đặt thành số âm cao giúp chúng thoát khỏi chế độ xem màn hình (lần nữa là "chén thánh")

Tôi không thể tìm thấy bố cục 3 cột trong CSS không dựa vào một trong các điều trên. Và dựa vào một trong những điều trên dường như phủ nhận rất nhiều lợi thế của việc sử dụng CSS trên các bảng. Tôi không muốn phải roi ra Photoshop và thay đổi kích thước một hình ảnh mỗi khi tôi muốn thay đổi chiều rộng của cột bên trái của tôi. Và tôi không muốn phải rút máy tính để tìm ra có bao nhiêu điểm ảnh bên cạnh màn hình mà DIV của tôi phải làm.

Tôi nên đề cập rằng tôi đang tìm bố cục có chiều cao bằng nhau.

Bất kỳ ai?

EDIT: Tôi đang tìm chiều rộng 100%, với cột ở giữa là chất lỏng.

EDIT: Tôi cũng hy vọng xác định chiều rộng của cột trái và phải theo pixel.

CHỈNH SỬA: Nền có thể trong suốt, nhưng tôi muốn có một đường phân cách giữa các cột chạy tất cả các con đường lên và xuống.

Nguồn

2009-05-15 Sean

Xóa nhân loại - Tôi không nghĩ bạn sẽ có thể thoát ra mà không cần hack. Đặc biệt là vì chiều cao bằng nhau. Phụ thuộc vào phiên bản của CSS bạn muốn làm cơ sở của bạn. –

Bạn cần chỉ định các yêu cầu của mình cho đường viền và màu nền/hình ảnh nền. 3 cột với hình nền trong suốt và không có đường biên nào dễ làm. –

Không có thứ gì "đơn giản" khi bạn nói về CSS.

Nhưng có một giải pháp đơn giản là trình duyệt chéo, làm giảm sự duyên dáng và tuân thủ HTML và CSS hoàn toàn: sử dụng bảng có ba cột.

Lý do: DIV không có nghĩa là có cùng chiều cao động. Vì vậy, CSS không có hỗ trợ cho việc này. Nếu bạn cần một yếu tố khối mà làm cho chắc chắn rằng con cái của nó có cùng chiều cao, thì đó là những gì bảng cho.

[EDIT] Xin lỗi vì đã xúc phạm tất cả các bạn về CSS cuồng tín, nhưng thật ra, khi một thứ gì đó không được thiết kế để làm điều gì đó và bạn lạm dụng nó, và nó không hoạt động, vui lòng ngừng phàn nàn, được không? Một DIV không phải là TABLE và không thể được sử dụng như một mà không dựa vào hack.

[EDIT2] Như đã nói trong various places, lý do không sử dụng bảng cho bố cục là, trong thời gian đầu, bảng là chỉ yếu tố thiết kế và dẫn đến HTML có hàng chục bảng lồng nhau. Thật tồi tệ. Nhưng điều đó không có nghĩa là bạn không được sử dụng một bảng duy nhất để đặt mọi thứ vào vị trí và sau đó dựa vào CSS để làm cho nội dung bên trong trông đúng.

Não giống như một chiếc dù: Thật tuyệt khi có nhưng chỉ hữu dụng khi mở.

Nguồn

2009-05-15 09:24:15

Bàn được thiết kế để thể hiện mối quan hệ giữa các bit dữ liệu (với mỗi mục trong một hàng có một điểm chung và mỗi mục trong một cột có điểm chung). Có tất cả các ô trong một hàng chia sẻ chiều cao là hậu quả, không phải là nguyên nhân. – Quentin

+10

Vâng, bạn có một mục tiêu và bạn có hai công cụ. Một người cau mày và người kia không phù hợp với dự luật ... bạn sử dụng cái nào? –

+1 không có sự xấu hổ khi sử dụng bảng cho bố cục miễn là nó vẫn đơn giản. –

Tôi đồng ý với Robert. Do trình duyệt giải thích các quy tắc CSS và hiển thị trang cuối cùng khác nhau nên tôi nghi ngờ bạn sẽ tìm thấy giải pháp hoàn hảo mà không cần phải linh hoạt hơn trong các yêu cầu của mình.

Nguồn

2009-05-15 09:23:36 Nick

Bạn có thể đạt được điều này bằng cách sử dụng jS.

Nếu bạn đã tạo 3 Divs một phao bên trái một bên phải và giữa là lề trái & ngay với chiều rộng để căn giữa nó.

Sau đó, với một chút JS mỗi div có ID riêng của họ, bạn có thể calcultate chiều cao của họ đặt 2 thấp hơn những người có giá trị cao nhất.

Khá đơn giản với Jquery.

Nguồn

2009-05-15 10:13:43 Lee

Đúng, thật dễ dàng với javascript ... nhưng anh ấy yêu cầu một giải pháp CSS tinh khiết. –

-2

chia trang thành ba cột, cùng chiều cao?

<html> 
<head> 
<style type="text/css"> 
#col_wrapper{ 
    height: 400px; 
} 

.col{ 
    width: 33%; 
    float:left; 
    height: 100%; 
} 
</style> 
</head> 
<body> 
<div id="col_wrapper"> 
    <div class="col"> 
     one 
    </div> 
    <div class="col"> 
     two 
    </div> 
    <div class="col"> 
     three 
    </div> 
</div> 
</body>

không có quirks và khá đơn giản.

Nguồn

2009-05-15 10:31:09 gunnarsson

Nên đã đề cập rằng chiều cao cố định sẽ không hoạt động. Một trang có thể có 5 đoạn văn bản ở cột giữa, một đoạn văn khác có thể có 25. – Sean

http://960.gs/

một này có thể được sử dụng cho một bố cục 3 cột (và bố trí khác nhau). Cá nhân, tôi không nghĩ rằng đó là một ý tưởng tuyệt vời để sử dụng div cho tất cả mọi thứ, nhưng nó đơn giản và tốt .. nó hoạt động.

chỉnh sửa: Đối với bố cục chiều rộng 100% http://www.alistapart.com/articles/fluidgrids/ có thể hữu ích, nhưng tôi không chắc liệu loại bố cục này có đủ điều kiện là "đơn giản" hay không.

Nguồn

2009-05-15 10:39:25

Xin lỗi, nên đề cập rằng tôi đang tìm chiều rộng 100% (với cột ở giữa là chất lỏng). – Sean

Vâng, một từ một danh sách ngoài trông phức tạp một chút. Một trong những điều mà nó không thực sự rõ ràng, ít hấp dẫn hơn, sử dụng một bảng định kiểu phức tạp, hoặc sử dụng một bảng mặc dù các bảng không dành cho bố cục. – Sean

Bạn có thể có thể thích ứng:

http://matthewjamestaylor.com/blog/perfect-3-column.htm

Nguồn

2009-05-15 12:25:15

Điều đó trông có vẻ đầy hứa hẹn, nhưng tôi đoán tôi nên đề cập đến Tôi đang tìm kiếm một cột có chiều rộng pixel, không phải là chiều rộng phần trăm. Trang web đó có chứa một mẫu cho độ rộng pixel ("chén thánh" mà tôi đã đề cập ở trên) nhưng đó là một bản định kiểu rất phức tạp, mà tôi sẽ phải nói là ít mong muốn hơn là sử dụng các bảng để bố trí. Điều đó sẽ rất tốt cho dù ai đó cần cột có chiều rộng phần trăm. – Sean

Đây là phiên bản có chiều rộng pixel: http://matthewjamestaylor.com/blog/holy-grail-no-quirks-mode.htm –

YAML

"Yet Another multicolumn Layout" (YAML) là một (X) khuôn khổ HTML/CSS cho tạo hiện đại và linh hoạt nổi bố cục. Cấu trúc cực kỳ linh hoạt trong lập trình của nó và hoàn toàn có thể truy cập cho người dùng cuối.

Nó chứa một số sửa lỗi của IE, nhưng bạn có thể xóa chúng.

Nguồn

2009-05-15 12:33:09 mjn

Quá nhiều thứ có tên là YAML những ngày này! –

Có bố cục CSS 3 cột thuần túy đơn giản không?

Trả lời

Các vấn đề liên quan