Bố cục nhiều cột (Tạp chí giống nhau) Với CSS3 / Thiết kế web

Nói chung, mọi người sẽ mất dấu khi đọc nội dung cực kỳ dài. Đó là lý do tại sao, trong các phương tiện truyền thông in ấn như tạp chí và báo chí, nội dung được chia thành nhiều cột để dễ đọc.

Tạo một cột trên Web là một câu chuyện hoàn toàn khác. Nó khá khó khăn. Trên thực tế, cách đây không lâu, bạn có thể cần chia nội dung theo cách thủ công thành một số divs và thả nó sang phải hoặc trái, sau đó chỉ định chiều rộng, phần đệm, lề, đường viền, v.v..

Nhưng, mọi thứ giờ đã đơn giản hơn nhiều với Mô-đun nhiều cột CSS3. Như tên ngụ ý rõ ràng, mô-đun này cho phép chúng tôi phân chia nội dung thành bố cục cột mà chúng tôi thấy trên báo hoặc tạp chí.

Hỗ trợ trình duyệt

Nhiều cột hiện được hỗ trợ trong tất cả các trình duyệt - Firefox 2+, Chrome 4+, Safari 3.1+ và Opera 11.1 - ngoại trừ, như dự đoán, Internet Explorer, nhưng phiên bản tiếp theo, IE10, dường như đã bắt đầu hỗ trợ cho Mô-đun này.

Đối với các trình duyệt còn lại, để nó hoạt động, Firefox vẫn cần -moz- tiền tố, trong khi Chrome và Safari cần -webkit- tiếp đầu ngữ. Opera không yêu cầu bất kỳ tiền tố nào, vì vậy chúng tôi chỉ có thể sử dụng các thuộc tính chính thức.

Tạo nhiều cột

Trước khi tạo các cột, chúng tôi đã chuẩn bị một số đoạn văn bản cho phần trình diễn, được gói bên trong HTML5

thẻ, như sau;

  Lorem ipsum dolor ngồi amet, consitetur adipiscing elit. Nunc Libero magna, venenatis quis aliquet et, rutrum in augue. Donec vel tạm thời dolor. Donec volutpat fringilla porta. Suspendisse non nulla tra tấn. Quisque Vendo ornare mi, ngồi amet aliquet justo bibendum non. Integer bibendum convallis sapien, ngồi amet tincidunt orci placerat in. Integer vitae resultat augue. // và cứ thế

Liên kết và chỉ định chiều rộng cho 600px từ bảng mẫu, đó là nó.

Bây giờ, hãy bắt đầu tạo các cột.

Trong ví dụ dưới đây, chúng tôi sẽ chia nội dung thành hai cột với số cột bất động sản. Thuộc tính này sẽ yêu cầu trình duyệt hiển thị nội dung thành các cột theo số lượng được chỉ định và để trình duyệt quyết định độ rộng phù hợp cho mỗi cột.

 bài viết -webkit-cột-đếm: 2; -moz-cột-đếm: 2; đếm cột: 2;

Ngoài việc được xác định bởi số đếm, các cột có thể được tạo bằng cách chỉ định chiều rộng bằng cách sử dụng chiều rộng cột thuộc tính và rời khỏi trình duyệt để quyết định có bao nhiêu cột được tạo tại chỗ.

Trong ví dụ này, chúng tôi chỉ định chiều rộng cột cho 150px, dẫn đến nội dung được chia thành ba cột.

 bài viết -moz-cột-width: 150px; -webkit-cột-width: 150px; chiều rộng cột: 150px;

Như đã nêu trong thông số kỹ thuật. chiều rộng thực tế của cột có thể rộng hơn hoặc hẹp hơn chiều rộng cột được chỉ định tùy thuộc vào không gian có sẵn. Ngoài ra, nếu giá trị chiều rộng không được chỉ định rõ ràng, “Tự động” sẽ được coi là mặc định, điều đó cũng có nghĩa là “không có cột”.

Khoảng cách cột

Khoảng cách cột xác định các không gian phân tách từng cột. Giá trị khoảng cách có thể được nêu trong em hoặc là px, nhưng như đã nêu trong thông số kỹ thuật giá trị không thể âm. Trong ví dụ dưới đây, chúng tôi chỉ định khoảng cách cho 30px, vì vậy khoảng cách giữa các cột trông rộng hơn một chút.

 bài viết -webkit-cột-gap: 30px; -moz-cột-gap: 30px; cột-gap: 30px;

Quy tắc cột

Nếu bạn muốn thêm viền giữa cột, bạn có thể sử dụng quy tắc cột tài sản, hoạt động rất giống với biên giới bất động sản. Vì vậy, giả sử, nếu chúng ta muốn đặt một đường viền chấm giữa cột, chúng ta có thể viết;

 bài viết -moz-cột-rule: 1px chấm #ccc; -webkit-cột-rule: 1px rải rác #ccc; quy tắc cột: 1px chấm #ccc;

Cột Span

Khách sạn này hoạt động khá giống với colspan trong bàn nhãn. Việc triển khai chung của tài sản này là mở rộng tiêu đề của nội dung trên tất cả các cột. Đây là một ví dụ.

 bài viết h1 -webkit-cột-span: tất cả; cột-nhịp: tất cả;

Trong ví dụ trên, chúng tôi đã định nghĩa h1 để trải rộng trên tất cả các cột và nếu nhịp cột được chỉ định, 1 sẽ được lấy làm mặc định. Thật không may, tài sản này, tại thời điểm viết bài này, chỉ hoạt động trong Opera và Chrome.

Từ cuối cùng

Đó là tất cả cho đến nay, chúng tôi đã tìm ra tất cả những thứ thiết yếu để tạo nhiều cột bằng CSS3 và như chúng tôi đã đề cập lúc đầu, mô-đun này hoạt động rất tốt trong các trình duyệt hiện đại nhưng nó chưa hoạt động trong Internet Explorer.

Cuối cùng, chúng tôi hy vọng rằng bây giờ bạn đã hiểu khá rõ về cách tạo cột bằng CSS3 và nếu bạn có thời gian để thử nghiệm, vui lòng chia sẻ phương pháp và kết quả của bạn trong hộp bình luận bên dưới. Cảm ơn bạn đã đọc bài viết này và vui chơi.

Bản giới thiệu
Tải xuống nguồn