Dịch vụ bưu thiếp làm sẵn. Các cột có cùng chiều cao
Trang này mô tả các ví dụ cho phép bạn thực hiện cột có cùng chiều cao trong bố cục với bố cục khối. Đối với nhiều nhà thiết kế bố cục mới bắt đầu, đây là một vấn đề rõ ràng, bởi vì nếu chiều cao của các cột bố cục không được chỉ định rõ ràng thì chúng sẽ giãn ra vừa đủ để chứa nội dung của chúng. Theo đó, hóa ra thay vì có cùng chiều cao, mỗi cột trong bố cục đều có chiều cao riêng, trông không đẹp mắt cho lắm.
Để rõ ràng hơn, tất cả các ví dụ đều sử dụng bố cục với chân trang ép. Do đó, tôi thu hút sự chú ý của bạn đến thực tế là một số khối hoặc thuộc tính CSS có liên quan đến việc tạo các cột có cùng chiều cao đã có sẵn trong bố cục ban đầu. Nghĩa là, cuối cùng, chúng thực hiện các chức năng kép - chúng nhấn chân trang xuống dưới cùng và kéo các cột. Tuy nhiên, để thuận tiện hơn, chỉ những thuộc tính vẽ cột mới được cung cấp Nhận xét CSS và việc chúng có được sử dụng cho mục đích khác hay không không quan trọng.
Các cột có cùng chiều cao sử dụng định vị
Ví dụ này dựa trên nguyên tắc giả cột bổ sung và định vị tuyệt đối. Để làm điều này, một số khối được tạo (theo số lượng cột), được kéo dài hết chiều cao của trang và đặt dưới các cột thực tế. Để tạo hiệu ứng cho các cột có cùng chiều cao, các cột giả này được cung cấp màu nền theo yêu cầu.
Mô tả ví dụ
- Tất cả các khối bố cục được gói trong một khối bao bọc bổ sung id="wrapper" có chiều cao tối thiểu (CSS) là 100% để nó có thể kéo dài hết chiều cao của cửa sổ trình duyệt nhưng có thể kéo dài hơn nữa nếu cần. Nhưng vì chiều cao phần trăm được tính tương đối so với tổ tiên nên chúng tôi phải chỉ định nó cho cả thẻ và . Liên quan đến khối trình bao bọc này, chúng tôi sẽ định vị các cột giả của mình, vì vậy nó đã được thêm vào Thuộc tính CSS:liên quan đến
- Ở cuối bố cục, bản thân các cột giả được tạo với id bằng “menu_back”, “sidebar_back” và “content_back”, áp dụng định vị tuyệt đối. Ngoài ra, các cột giả bên được cung cấp tọa độ chiều rộng (CSS) và tọa độ offset (CSS, and), trong khi cột giả ở giữa chỉ được cung cấp tọa độ offset để chúng chiếm cùng vị trí với các cột thực. Chà, để các cột giả kéo dài đến hết chiều cao của khối trình bao bọc, chúng đã được cấp thuộc tính CSS :100%.
- Kết quả của các hành động của điểm thứ hai, mặc dù các cột tưởng tượng của chúng tôi kéo dài như mong đợi và chiếm vị trí mong muốn, nhưng chúng vẫn nằm ở trên cùng của các khối bố cục chính. Và tất cả là do vị trí tuyệt đối đã được sử dụng, tính năng này sẽ kéo các phần tử ra khỏi luồng chính. Để khắc phục điều này, họ đã đưa ra một tiêu cực Giá trị CSS, để “đặt” chúng vào trong bố cục. Tất cả đã sẵn sàng.
- Về nguyên tắc, bạn có thể bỏ cột giả trung tâm bằng cách chỉ cần đặt màu mong muốn cho toàn bộ trang của trang.
Vì trong trình duyệt web IE 6 vấn đề phát sinh với phương pháp tạo cột có cùng chiều cao này, sau đó một số vấn đề đã được sử dụng cho nó hack:
- IE6 không hiểu nó, nhưng nó hoạt động với nó như thể nó có chiều cao tối thiểu. Ngoài ra, trong một tình huống nhất định, trình duyệt này sẽ bỏ qua quy tắc này. Hai tính năng này một mặt được sử dụng để đặt chiều cao tối thiểu của khối trình bao bọc và mặt khác không can thiệp vào các trình duyệt khác.
- Trong ví dụ này, IE6 chỉ kéo dài các cột giả theo chiều cao của “màn hình đầu tiên”, nhưng nó hiểu biểu thức (document.body.offsetHeight), tính toán chiều cao một cách linh hoạt. Vì vậy, nó được sử dụng để liên tục thay thế giá trị mong muốn vào thuộc tính.
- Tuy nhiên, IE6 không hoạt động với “content_back”, vì độ rộng của nó không được đặt rõ ràng. Tất nhiên, ở đây, bạn có thể đặt chiều rộng của nó thành 100% và “đặt nó” thậm chí còn thấp hơn so với những người anh em bên cạnh của nó, tạo cho nó một :-2 riêng biệt, nhưng liệu nó có đáng không?
Các cột có chiều cao bằng nhau sử dụng hình nền
Ví dụ này là cách triển khai đơn giản nhất và bao gồm thực tế là một hình ảnh “ngang” nhỏ được tạo, bao gồm một số màu (theo số cột), sau đó được “nhân” theo chiều dọc, mô phỏng các cột. Thật không may, phương pháp này chỉ phù hợp với bố cục cố định và đừng quên rằng trong trình duyệt bị tắt hình ảnh sẽ không có cột.
Có thể nhìn thấy hình nền được sử dụng trong ví dụ. Với sự trợ giúp của nó, diện mạo của các cột có cùng chiều cao đã được tạo ra.
Mô tả ví dụ
- Bố cục cố định có một khối bao bọc thực sự làm cho bố cục đó được cố định. Vì vậy, anh ấy đặt hình nền (CSS), được nhân theo chiều dọc.
Các cột có chiều cao bằng nhau sử dụng lề và phần đệm
Ví dụ này sử dụng một kỹ thuật khá bất thường. Đầu tiên, tất cả các cột đều có lề dưới rất lớn, do đó chúng bị kéo dài, sau đó là lề dưới có cùng kích thước, nhưng có giá trị âm. Cuối cùng, mọi thứ “thêm” chỉ đơn giản là bị cắt bỏ.
Mô tả ví dụ
- Để tăng mức thấp hơn phần đệm một thuộc tính có giá trị rất lớn được áp dụng cho tất cả các cột.
- Các cột được cấp lề chân trang âm (CSS) bằng với phần đệm được chỉ định. Tuy nhiên, trong trường hợp cụ thể này, kích thước của trường này nhỏ hơn 100px. Điều này là do phương pháp được sử dụng trong ví dụ này để nhấn chân trang xuống yêu cầu lề dưới có kích thước bằng với chiều cao của chân trang. Tổng cộng chúng tôi nhận được: 30000px-29900px=100px.
- Kết quả của điểm thứ hai là giảm chiều cao của trình bao bọc (id = "wrapper") xuống kích thước như thể không có sự gia tăng nào trong các cột. Nghĩa là, đối với anh ấy, chúng có chiều cao bằng nhau dựa trên nội dung của chúng (trong trường hợp của chúng tôi, anh ấy thêm cùng 100px đó), mặc dù về mặt trực quan, chúng vẫn có chiều cao 30000px. Nói cách khác, chúng chỉ đơn giản là kéo dài ra xa mép của lớp bọc.
- Thuộc tính CSS :hidden được áp dụng cho khối trình bao bọc để cắt bớt mọi thứ nằm ngoài giới hạn của nó. Kết quả là chúng ta có những chiếc loa đẹp có cùng chiều cao.
Phương pháp này dành cho nhiều trình duyệt và mọi người đều hiểu nó, kể cả Internet Explorer 6. Nhưng cùng với cách nhấn chân trang, nó từ chối hoạt động chính xác. Tôi không nghĩ ra “chiếc nạng” mới cho ông già này mà ngược lại, tôi loại bỏ một số thuộc tính giúp ông bấm chân trang. Vì vậy, khi thêm nội dung vào các cột, trong IE6 mọi thứ đều diễn ra như mong đợi.
Vlad Merzhevich
Cột đôi lưới mô-đun Nó thường được sử dụng trên các trang web và theo quy định, một cột chứa tài liệu chính (ví dụ: văn bản của một bài báo) và cột thứ hai chứa các liên kết đến các phần của trang web và thông tin khác. Để tạo bố cục như vậy, các bảng khá thuận tiện - mỗi ô hoạt động như một cột riêng biệt, giúp bạn dễ dàng điều chỉnh thông số khác nhau hiển thị tài liệu.
Chiều rộng cột
Trước tiên, hãy xem xét tùy chọn đơn giản nhất, khi chiều rộng của cột bên trái được mã hóa cứng bằng pixel và chiều rộng của cột bên phải thay đổi tùy thuộc vào kích thước của cửa sổ trình duyệt. Để làm được điều này, bạn cần đặt tổng chiều rộng của toàn bộ bảng dưới dạng phần trăm thông qua thuộc tính chiều rộng của thẻ
| (ví dụ 1).
Ví dụ 1: Chiều rộng cột tính bằng pixel
Trong ví dụ này, đường viền bảng không được hiển thị và việc căn chỉnh theo chiều dọc của nội dung ô dọc theo cạnh trên được xác định bởi thuộc tính valign có giá trị top . Điều này là cần thiết để khi nội dung của các ô khác nhau về âm lượng, chúng không di chuyển tương đối với nhau mà bắt đầu theo cùng một cách từ cạnh trên. Các thuộc tính chiều rộng và valign có thể được thay thế bằng các thuộc tính kiểu chiều rộng và căn chỉnh dọc có cùng giá trị. Sau đó mã này sẽ có lượt xem tiếp theo(ví dụ 2). Ví dụ 2: Sử dụng kiểu
Lề trong cộtKhoảng cách giữa các cột được kiểm soát bởi thuộc tính cellpadding của thẻ
Trong ví dụ này các giá trị thuộc tính không gian ô và phần đệm ô bằng 0 và khoảng cách giữa các nội dung cột được xác định bởi thuộc tính đệm bên phải, được thêm vào ô bên trái thông qua mã định danh có tên leftcol . Tương tự, việc thụt lề có thể được điều chỉnh không chỉ ở bên phải mà còn ở các phía khác của mỗi ô. Ví dụ 4 cho thấy cách đặt lề cho tất cả các ô bằng cách sử dụng kiểu. Ví dụ 4. Lề trong ô
Màu nền cộtĐể phân tách trực quan một cột khỏi cách sử dụng khác kỹ thuật khác nhau, phổ biến nhất trong số này có lẽ là việc sử dụng màu nền. Tốt hơn là chỉ định màu sắc thông qua kiểu dáng; điều này cho phép bạn đặt thiết kế trang vào một tệp riêng biệt. Để thực hiện việc này, hãy tạo một lớp kiểu mới, đặt thuộc tính nền cho nó và áp dụng nó cho ô được yêu cầu (ví dụ 5). Ví dụ 5: Màu nền
Trong ví dụ này, các màu nền khác nhau được thêm vào cho cột bên phải và bên trái (Hình 1). Cơm. 1. Cột có màu sắc khác nhau Dấu phân cách cộtSử dụng các trường không phải lúc nào cũng phù hợp để cài đặt khoảng cách cần thiết giữa các cột. Ví dụ: trong trường hợp không thể đưa vào các trường xung quanh văn bản vì nhiều lý do. Sau đó, việc thêm một ô khác sẽ hữu ích, hoạt động như một dấu phân cách giữa các cột (ví dụ 6). Ví dụ 6: Sử dụng 3 ô
Ví dụ này giới thiệu một cột khác với bộ đệm định danh kiểu, điều này giúp dễ dàng thay đổi độ rộng giữa các cột. Bạn không cần phải đặt bất cứ thứ gì vào ô này; trình duyệt hoạt động khá chính xác với các ô như vậy. Trong bộ lễ phục. Hình 2 cho thấy kết quả của ví dụ. Để rõ ràng và đẹp mắt, một đường viền đã được thêm vào xung quanh các cột. Dòng giữa các cộtBạn có thể tách các cột không chỉ bằng màu nền và khoảng trống, mà còn bằng cách thêm một dòng giữa các cột. Một lần nữa, các kiểu lại có ích ở đây vì chúng giúp việc tạo đường dễ dàng hơn nhiều. Bạn chỉ cần đặt thuộc tính border-left cho cột bên phải hoặc border-right cho cột bên trái (ví dụ 7). Ví dụ 7: Thêm một dòng
Kết quả ví dụ này hiển thị dưới đây. Bản tóm tắtTạo cột bằng bảng là một quá trình khá đơn giản và nhanh chóng; bạn chỉ cần thêm một bảng có hai ô và xác định các thuộc tính trực quan của nó. Ngoài ra, hầu hết các tham số xác định loại bảng có thể được đưa vào kiểu và do đó tăng tốc quá trình thêm các bảng cùng loại và tài liệu dựa trên chúng. Với bố cục hai cột, các phương tiện khác nhau được sử dụng để thiết kế các cột. Ví dụ: bạn có thể sử dụng nền, thêm đường viền xung quanh các cột, thay đổi khoảng cách giữa chúng hoặc đặt đường phân chia dọc. Tất cả những điều này được kiểm soát bằng cách sử dụng các kiểu, dẫn đến giảm mã, mở rộng các tùy chọn sửa đổi bảng và dễ dàng phát triển trang web. Để tiếp tục chủ đề của mình, tôi cung cấp cho bạn bản dịch của một bài viết đi sâu hơn về thuộc tính nhiều cột với các ví dụ đơn giản và rõ ràng. Báo chí và tạp chí cũng đã chứng minh trên thực tế rằng văn bản được chia thành nhiều cột sẽ dễ nhận biết hơn nhiều. Trên các trang web, cho đến gần đây, việc hiển thị nội dung theo cách này là một vấn đề, đến mức người thiết kế bố cục phải chia văn bản thành nhiều div, nhưng mọi thứ có thể trở nên đơn giản hơn nhiều với CSS3 Multi Column Module. Tạo nội dung nhiều cộtSử dụng thẻ HTML5 bài báo: Chúng ta chia văn bản thành hai cột:
Bài viết ( -webkit-column-count:2; -moz-column-count:2; columns-count:2; ) Sử dụng tài sản chiều rộng cột Bạn có thể đặt các cột theo chiều rộng yêu cầu:
Bài viết ( -moz-column-width: 150px; -webkit-column-width: 150px; chiều rộng cột: 150px; ) Khoảng cách cộtKhoảng thời gian được chỉ định bởi thuộc tính khoảng cách cột bằng px hoặc em và không thể âm:
Bài viết ( -webkit-cột-gap: 30px; -moz-cột-gap: 30px; khoảng cách cột: 30px; ) Dấu phân cách cộtTài sản quy tắc cột cho phép thêm dấu phân cách giữa các cột, nguyên lý hoạt động tương tự như ranh giới.
Bài viết ( -moz-column-rule: 1px chấm #ccc; -webkit-column-rule: 1px chấm #ccc; quy tắc cột: 1px chấm #ccc; ) Hợp nhất các cộtTài sản nhịp cột hoạt động tương tự với colspan V. bàn, kết hợp các cột được yêu cầu.
Bài viết h1 ( -webkit-column-span: all; cột-span:all; ) Điểm mấu chốtNhờ Mô-đun nhiều cột CSS3, bạn có thể chia văn bản thành các cột có thể đọc được một cách nhanh chóng và dễ dàng. Danh sách các trình duyệt được hỗ trợ đã đủ để thử chức năng nhiều cột trong các dự án đang hoạt động. Đối với các trình duyệt lỗi thời, bạn có thể sử dụng một trình duyệt đặc biệtCách làm loaTrước tiên, chúng ta hãy xem xét một số cách bạn có thể tạo cột và sau đó chúng ta sẽ xem xét một vài ví dụ. Sử dụng khối nổi. Ngày nay đây là cách sản xuất loa phổ biến nhất, mặc dù Flexbox đang dần bắt đầu thay thế nó. Theo mặc định, hai khối trong luồng thông thường không thể nằm trên cùng một dòng, nhưng hành vi này có thể dễ dàng thay đổi bằng cách yêu cầu cả hai khối tài sản nổi: trái | Phải. Chúng sẽ bắt đầu ép vào cạnh trái hoặc phải. Để khối theo sau chúng chấp nhận các khối nổi và được đặt chính xác, nó cần được đặt thành xóa: cả hai. Sử dụng phao, 2 hoặc 3 cột thường được tạo nhất. Bố cục của một trang web với các khối nổi không phức tạp lắm, bạn chỉ cần biết một số sắc thái trong hành vi của chúng. Ví dụ: nếu bạn cần tạo một khu vực để hiển thị các bài viết và ở bên phải - thanh bên với một menu, các khối nổi sẽ rất dễ dàng thực hiện sự sắp xếp như vậy. Sử dụng bảng. Các bảng thường được tạo ra cho đầu ra số lượng lớnô và cột nên việc tạo cột trong đó rất dễ dàng. Một bảng có thể có ít nhất 20 cột. Toàn bộ cấu trúc của nó được mô tả bằng mã html nên mã này khá cồng kềnh. Vì các ô trong bảng có thể được đặt ở bất kỳ kích thước nào nên trước đây hầu hết tất cả các trang web đều được thiết kế bằng cách sử dụng chúng. Ví dụ: để triển khai bố cục đơn giản nhất (tiêu đề, nội dung, thanh bên, chân trang), ba hàng đã được tạo trong bảng (hàng của bảng được tạo bởi thẻ tr). Mỗi hàng chứa hai ô vì nội dung và thanh bên phải được đặt riêng biệt với nhau. Và trong phần đầu trang và chân trang, các ô này được kết nối đơn giản bằng cách sử dụng thuộc tính colspan trên thẻ td, nếu cần. Bạn có thể dễ dàng xóa khung khỏi các ô, điều này cho phép các nhà phát triển web bố cục các mẫu phức tạp khá dễ dàng. Sử dụng Flexbox. Cái này công nghệ hiện đại, bắt đầu lan rộng vào năm 2014, mặc dù nó đã tồn tại trước đó. Bản chất của nó như sau: một khối vùng chứa chung được tạo, trong đó các khối khác được đặt vào đó, các khối này sẽ cần được tạo ở dạng cột, sau đó vùng chứa này cần được gán display: flex. Tiếp theo, thuộc tính flex-direction thường được đặt để xác định hướng trục chính, dọc theo đó các khối sẽ được đặt. Các giá trị có thể được đặt thành: hàng và cột. Giá trị đầu tiên sẽ hướng các khối theo chiều ngang từ phải sang trái, giá trị thứ hai - hướng xuống. Bạn cũng có thể đặt đảo ngược: flex-direction: row-reverse. Các khối sẽ được đặt từ phải sang trái. Ngoài ra còn có một tập hợp các thuộc tính riêng biệt cho các khối con của một thùng chứa linh hoạt. Về cơ bản, các thuộc tính này cho phép bạn đặt kích thước của khối và hành vi của nó so với các phần tử khác. Ưu điểm của flexbox là nó linh hoạt hơn nhiều. Nếu tại bố trí khối các nhà phát triển web thường phải tính toán mọi thứ theo từng pixel, thiết lập các khoảng thụt lề chính xác, thêm nhiều thủ thuật khác nhau vào mã để mọi thứ không bị rời rạc, khi đó các phần tử flex có thể dễ dàng được sắp xếp thành một cột, liên tiếp và thường yêu cầu ít hơn nhiều Tính toán toán học từ phía nhà phát triển. Tách văn bản thành các cộtTuy nhiên, tôi vẫn chưa đề cập nhiều nhất chủ đề chính. CSS ngày nay cung cấp khả năng chia nhỏ văn bản trong một khối nội dung mà không cần sự trợ giúp của float, bảng hoặc flexbox. Tức là trong html chỉ có một khối thông thường và văn bản được chia thành các cột chỉ nhờ css. Vì vậy, các thuộc tính sau áp dụng cho khối trong đó văn bản cần được chia thành nhiều cột. Column-count – thuộc tính chỉ định số cột mà văn bản sẽ được chia vào. Bạn nên đặt giá trị từ 2 đến 4, tùy thuộc vào mức bạn thích nhất. Độ rộng cột – đặt số lượng ký tự của văn bản trong một cột. Tôi nhấn mạnh rằng chiều rộng cột là trong trường hợp nàyđược chỉ định không phải bằng pixel mà bằng số lượng ký tự. Tối ưu: 30-50 ký tự trong một cột. Ngoài ra, thuộc tính này hoàn toàn không thể được gọi là đa trình duyệt, vì bạn chỉ đặt số lượng ký tự mong muốn, nhưng liệu trình duyệt có hoạt động theo mong muốn của bạn hay không vẫn còn phải xem. Khoảng cách cột – xác định khoảng cách giữa các cột. Có thể được chỉ định bằng pixel. Quy tắc cột – vẽ một đường ngăn cách các cột. Cú pháp thuộc tính hoàn toàn giống nhau tài sản biên giới. Đầu tiên, độ dày của đường được ghi lại, sau đó là loại và sau đó là màu của nó. Ngoài ra tôi muốn đề cập rằng tất cả các thuộc tính css này đều tương đối mới. Ví dụ: Internet Explorer chỉ hỗ trợ chúng từ phiên bản mười. Đây là các thuộc tính theo tiêu chuẩn CSS3, vì vậy nếu bạn định sử dụng chúng trên trang web của mình, bạn cần quan tâm đến khả năng tương thích giữa nhiều trình duyệt, nếu không sẽ không có cột trong các phiên bản Opera và IE cũ hơn. Ví dụKhối nổi. Bố cục của một trang web theo hai cột thường được thực hiện rất đơn giản bằng cách sử dụng các khối nổi. Trong css, điều này được thực hiện giống như thế này: Float-block1( float: left ) .float-block2( float: left ) khối phải ở dưới float( clear: left | cả hai ) Nghĩa là, khối dưới cùng cần chỉ định thuộc tính này để nó được đặt chính xác. Như vậy, các khối nổi sẽ trở thành một dòng nếu chúng có đủ chiều rộng phần tử cha. Đương nhiên, bạn cũng cần chỉ định chiều rộng, chiều cao và khung của các khối để nó trông giống như ảnh chụp màn hình này:
Bây giờ chúng ta hãy làm phần thú vị. Hãy thêm nhiều văn bản ngẫu nhiên vào khối chính và cố gắng hiển thị nó ở đó thành ba cột, giống như trên một tờ báo hoặc tạp chí. Để làm điều này, bạn cần thêm các quy tắc sau vào mã của khối này. TRONG bài học này Chúng ta sẽ nói về việc sử dụng thuộc tính CSS3 để xây dựng mẫu nhiều cột. Vì đây là CSS3 nên việc sử dụng các thuộc tính của nó đòi hỏi phải kiểm tra cẩn thận trước.
Sử dụng nhiều cộtĐể tạo nhiều cột bạn có thể sử dụng thuộc tính:
Cái đầu tiên đặt số cột chính xác sẽ được xuất ra và cái cuối cùng đặt chiều rộng của mỗi cột. Tất cả các tham số cột khác sẽ được xác định bởi chiều rộng có sẵn. Chúng tôi sử dụng đánh dấu HTML:
Mã CSS sẽ như thế này: Div (số cột: 3) hoặc như thế này: Div (độ rộng cột: 15em) /* Bạn cũng có thể sử dụng px */ Một bản ghi âm ngắn cũng có sẵn: Div (cột: 3 20em) TRONG ghi chú ngắn Bạn có thể đặt số lượng cột và chiều rộng của chúng. Tuy nhiên, trên thực tế, như một quy luật, chỉ cần một điều. Việc xác định các cột bằng thuộc tính đếm cột sẽ phù hợp hơn với các mẫu linh hoạt vì chiều rộng của các cột sẽ điều chỉnh khi chiều rộng của màn hình trình duyệt thay đổi.
Thùng chứa cộtViệc sử dụng thuộc tính số lượng cột hoặc độ rộng cột sẽ tạo ra một vùng chứa mới giữa yếu tố bên ngoài và nội dung. Nó được gọi là vùng chứa cột, mặc dù bạn không thể thay đổi thuộc tính của nó. Các cột được căn chỉnh thành một hàng. Tất cả các vùng chứa cột liên tiếp sẽ có cùng chiều cao, mặc dù nội dung của chúng có thể khác nhau đáng kể. Nếu bạn làm cho một phần tử nổi trong vùng chứa cột, nó sẽ bị giới hạn trong vùng chứa cột chứ không phải vùng chứa bên ngoài. Đặt độ rộng của phần tử cột theo % cũng sẽ có tác dụng - chiều rộng sẽ được tính từ chiều rộng của vùng chứa cột chứ không phải vùng chứa bên ngoài.
Dấu cách và dấu phân cách cộtCó rất ít sự kiểm soát đối với loa. Chúng ta có thể đặt khoảng cách giữa các cột bằng thuộc tính khoảng cách cột. Theo mặc định, thuộc tính khoảng cách cột được đặt thành 1em. Div (khoảng cách cột: 2em) Bạn cũng có thể đặt dấu phân cách dọc bằng thuộc tính quy tắc cột: Div (quy tắc cột: đậm đặc #ccc) Một bản ghi ngắn có thể được biểu diễn bằng 3 thuộc tính hoạt động giống như khi xác định khung của các phần tử:
Khoảng cách có chiều cao bằng với vùng chứa cột và dấu phân cách được đặt ở giữa khoảng cách. Khoảng cách và dải phân cách có cùng chiều cao. Nếu một cột không có nội dung thì dấu phân cách giữa cột đó và các cột liền kề sẽ không hiển thị.
Phần đệm và nhịp cộtBạn có thể sẽ không thường xuyên sử dụng thuộc tính điền cột để chỉ định cách điền các cột. Đây là một cách để cho trình duyệt biết lượng nội dung cần đặt trong mỗi cột. Bạn có thể sử dụng tự động (mặc định) hoặc cân bằng, điều này sẽ buộc trình duyệt cố gắng điền đều các cột. Trong thực tế, không có nhiều khác biệt giữa kết quả sử dụng các giá trị này. Tập hợp khoảng sử dụng thuộc tính cột-span lớn hơn đáng kể cài đặt hữu ích. Nó cho phép phần tử HTML trải dài trên nhiều cột. Trong hình trên, tiêu đề sử dụng chính xác thuộc tính này. H2 (nhịp cột: tất cả) Chỉ có hai giá trị có thể có - tất cả (tất cả) hoặc không có gì (không có gì). Bạn sẽ không thể sử dụng 2 trong 3 cột.
Sự gián đoạn của loaCó ba thuộc tính tương tự có thể được sử dụng để ngắt nội dung trong một cột xung quanh một phần tử.
Định nghĩa các giá trị được sử dụng:
Mục đích của tất cả các thuộc tính và giá trị này là đảm bảo rằng nội dung nhất định bắt đầu trong một cột mới.
Nếu hình ảnh hoặc từ liên tục vượt quá chiều rộng cột sẽ bị cắt ở giữa khoảng trống nơi đặt dấu phân cách. Có thể giới hạn các cột để phần tử có nhiều cột hơn không gian cho đầu ra:
Phần kết luậnThuộc tính CSS3 để tạo mẫu nhiều cột có thể trở thành công cụ tuyệt vời. Nhưng việc sử dụng chúng đòi hỏi phải kiểm tra cẩn thận sự hỗ trợ trong các trình duyệt khác nhau. Với sự giúp đỡ của họ, bạn có thể thay đổi vẻ bề ngoài một dự án hiện tại mà không có những thay đổi lớn về cấu trúc. Những ghi chú cuối cùng
|
