CSS3 cho phép định nghĩa văn bản thành nhiều cột (giống các trang báo hay tạp chí).

Các thuộc tính bao gồm:

Thuộc tính Mô tả
column-count Xác định số cột
column-gap Xác định khoảng cách giữa các cột
column-rule-style Cho phép các cột phân chia bởi đường thẳng
column-rule-width Định nghĩa độ dày của đường thẳng phân chia các cột (nếu có)
column-rule-color Định nghĩa màu của  đường thẳng phân chia các cột (nếu có)
column-rule Viết tắt cho column-rule-* (style, width, color)
column-span Mở rộng một phần tử đến bao nhiêu cột (mặc định là 1)
column-width Độ rộng tối ưu cho các cột.

Trình duyệt hỗ trợ:

  Chrome IE/Edge Firefox Safari Opera
column-count 50.0 +
4.0 -webkit-		 10.0+ 2.0 -moz- 9.0+
3.1 -webkit-		 37.0 +
15.0 -webkit-
11.1
column-gap 50.0+
4.0 -webkit-		 10.0+ 2.0 -moz- 9.0+
3.1 -webkit-		 37.0+
15.0 -webkit-
11.1
column-rule-style 50.0+
4.0 -webkit-		 10.0+ 2.0 -moz- 9.0+
3.1 -webkit-		 37.0+
15.0 -webkit
11.1
column-rule-width 50.0+
4.0 -webkit-		 10.0+ 2.0 -moz- 9.0+
3.1 -webkit-		 37.0+
15.0 -webkit
11.1
column-rule-color 50.0+
4.0 -webkit-		 10.0+ 2.0 -moz- 9.0+

3.1 -webkit-

 37.0+
15.0 -webkit
11.1
column-rule 50.0+
4.0 -webkit-		 10.0+ 2.0 -moz- 9.0+
3.1 -webkit-		 37.0+
15.0 -webkit-
11.1
column-span 50.0+
4.0 -webkit-		 10.0+ Không hỗ trợ 9.0+
3.1 -webkit-		 37.0+
15.0 -webkit
11.1
column-width 50.0+
4.0 -webkit-		 10.0+ 2.0 -moz- 9.0+
3.1 -webkit-		 37.0+
15.0 -webkit
11.1

Các trình duyệt có sử dụng tiền tố (prefix) như –webkit-,  -moz-. Các số đứng trước các tiền tố là phiên bản bắt đầu của trình duyệt có sử dụng tiền tố, ví dụ trong Chrome và thuộc tính column-count có 4.0-webkit- nghĩa là kể từ phiên bản Chrome 4.0 sử dụng  –webkit-column-count.

(Tham khảo chi tiết về CSS3 Multi-column Layout tại https://www.w3schools.com/css/css3_multiple_columns.asp )

Học HTML & CSS >