Thuộc tính columns trong CSS

Định nghĩa và cách sử dụng

Thuộc tính columns là một thuộc tính viết tắt, được sử dụng để thiết lập chiều rộng và số lượng cột.

Xem thêm:

Hướng dẫn CSS3:Đa cột CSS3

Hướng dẫn tham khảo HTML DOM:Thuộc tính columns

Ví dụ

Định nghĩa chiều rộng và số lượng cột của cột:

div
{
columns:100px 3;
}

Thử ngay

Có thêm ví dụ ở cuối trang.

Cú pháp CSS

columns: column-width column-count;

Giá trị thuộc tính

Giá trị Mô tả
column-width Chiều rộng của cột.
column-count Số lượng cột.

Chi tiết kỹ thuật

Giá trị mặc định: auto auto
Kế thừa: no
Phiên bản: CSS3
Cú pháp JavaScript: object.style.columns="100px 3"

Thực hành thêm

Column-count
Chia văn bản trong thẻ div thành ba cột.
Column-gap
Chia văn bản trong thẻ div thành ba cột và đặt khoảng cách giữa các cột là 30 pixel.
Column-rule
Định nghĩa chiều rộng, phong cách và màu sắc giữa các cột.

Hỗ trợ trình duyệt

Số liệu trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính này.

Số liệu có tiền tố -webkit- hoặc -moz- biểu thị phiên bản đầu tiên sử dụng tiền tố.

Chrome IE / Edge Firefox Safari Opera
50.0
4.0 -webkit-		 10.0 52.0
9.0 -moz-		 9.0
3.1 -webkit-		 37.0
15.0 -webkit-
11.1