- Trang chủ
- Tham khảo
- CSS
- CSS3
- Thuộc tính column
Định nghĩa và sử dụng
Thuộc tính column trong css3 dùng để chia nội dung thành phần thành nhiều cột khác nhau, không cần phải sử dụng thuộc tính float trong css.
Thuộc tính của column trong css3:
column | đơn vị | column: 200px; | Xác định chiều rộng cho cột. |
Số nguyên | column: 3; | Xác định số lượng cho cột. | |
column-count | Số nguyên | column: 3; | Xác định số lượng cho cột. |
column-count | column-count: 3; | auto | |
column-count: auto; | đơn vị | column: 200px; | Xác định chiều rộng cho cột. |
Số nguyên | column: 3; | Xác định số lượng cho cột. | |
column-count | column-count: 3; | auto | column-count: auto; |
Số cột sẽ được xác định bởi các thuộc tính colum khác. | column-gap | ||
column-gap: 30px; | Xác định khoảng cách giữa các cột. | ||
normal | column-gap: normal; | ||
Khoảng cách cột sẽ có giá trị như mặc định [1em]. | column-rule-style | ||
dashed | column-rule-style: dashed; | ||
Thiết lập kiểu của các đường kẻ giữa các cột. | dotted | ||
column-rule-style: dotted; | double | ||
column-rule-style: double; | groove | ||
column-rule-style: groove; | hidden | ||
column-rule-style: hidden; | inset | column-rule-style: inset; | none |
column-rule-style: none; | đơn vị | column: 200px; | Xác định chiều rộng cho cột. |
Số nguyên | column: 3; | Xác định số lượng cho cột. | |
column-count | column-count: 3; | auto | |
column-count: auto; | Số cột sẽ được xác định bởi các thuộc tính colum khác. | column-gap | |
column-gap: 30px; | đơn vị | column: 200px; | Xác định chiều rộng cho cột. |
Số nguyên | column-count: auto; | ||
inset | none | ||
column-rule-style: none; | 1 | outset | column-rule-style: outset; |
ridge | column-rule-style: ridge; | solid | |
column-rule-style: solid; | đơn vị | column: 200px; | Xác định chiều rộng cho cột. |
column-count | column-count: 3; | auto |
column-count: auto;
column rule
Số cột sẽ được xác định bởi các thuộc tính colum khác.
column-gap
p { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-rule: 1px dashed #cc0000; -moz-column-rule: 1px dashed #cc0000; -webkit-column-rule: 1px dashed #cc0000; }
column-gap: 30px;
Xác định khoảng cách giữa các cột.
Thuộc tính column-span
Thuộc tính column-span : Xác định thành phần nằm trong một cột hay sắp xếp trong các cột.
HTML viết:
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Hiển thị trình duyệt khi chưa có columns:
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính columns, CSS viết:
div { columns: 200px; -moz-columns: 200px; -webkit-columns: 200px; -o-columns: 200px; -ms-columns: 200px; }
Hiển thị trình duyệt khi có columns:
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính columns, CSS viết:
Hiển thị trình duyệt khi có columns:
div { columns: 4; -moz-columns: 4; -webkit-columns: 4; -o-columns: 4; -ms-columns: 4; }
Số cột tự động hình thành theo công thức: chiều rộng của thành phần chia cho chiều rộng cột.
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính columns, CSS viết:
Hiển thị trình duyệt khi có columns:
Số cột tự động hình thành theo công thức: chiều rộng của thành phần chia cho chiều rộng cột.
Thêm thuộc tính columns với số nguyên, CSS viết:
div { column-count: 2; -moz-column-count: 2; -webkit-column-count: 2; -o-column-count: 2; -ms-column-count: 2; }
Hiển thị trình duyệt khi có columns: 4
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính columns, CSS viết:
div { columns: auto; -moz-columns: auto; -webkit-columns: auto; -o-columns: auto; -ms-columns: auto; }
Hiển thị trình duyệt khi có columns:
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính columns, CSS viết:
Hiển thị trình duyệt khi có columns:
Số cột tự động hình thành theo công thức: chiều rộng của thành phần chia cho chiều rộng cột.
div { columns: 3; column-gap: 10px; -moz-columns: 3; -moz-column-gap: 10px; -webkit-columns: 3; -webkit-column-gap: 10px; -o-columns: 3; -o-column-gap: 10px; -ms-columns: 3; -ms-column-gap: 10px; }
Thêm thuộc tính columns với số nguyên, CSS viết:
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-gap với giá trị 30px, CSS viết:
div { columns: 3; column-gap: 30px; -moz-columns: 3; -moz-column-gap: 30px; -webkit-columns: 3; -webkit-column-gap: 30px; -o-columns: 3; -o-column-gap: 30px; -ms-columns: 3; -ms-column-gap: 30px; }
Hiển thị trình duyệt khi có column-count: 30px
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-gap với giá trị normal, CSS viết:
div { columns: 3; column-gap: normal; -moz-columns: 3; -moz-column-gap: normal; -webkit-columns: 3; -webkit-column-gap: normal; -o-columns: 3; -o-column-gap: normal; -ms-columns: 3; -ms-column-gap: normal; }
Hiển thị trình duyệt khi có column-count: normal
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-gap với giá trị normal, CSS viết:
Hiển thị trình duyệt khi có column-count: normal
Trả lại khoảng cách các cột như bình thường.
Thuộc tính column-rule-style
div { columns: 3; column-rule-style: dashed; -moz-columns: 3; -moz-column-rule-style: dashed; -webkit-columns: 3; -webkit-column-rule-style: dashed; -o-columns: 3; -o-column-rule-style: dashed; -ms-columns: 3; -ms-column-rule-style: dashed; }
Thuộc tính column-rule-style: Thiết lập kiểu của các đường kẻ giữa các cột.
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-gap với giá trị normal, CSS viết:
p { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-rule: 1px dashed #cc0000; -moz-column-rule: 1px dashed #cc0000; -webkit-column-rule: 1px dashed #cc0000; }0
Hiển thị trình duyệt khi có column-count: normal
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-gap với giá trị normal, CSS viết:
p { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-rule: 1px dashed #cc0000; -moz-column-rule: 1px dashed #cc0000; -webkit-column-rule: 1px dashed #cc0000; }1
Hiển thị trình duyệt khi có column-count: normal
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-gap với giá trị normal, CSS viết:
p { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-rule: 1px dashed #cc0000; -moz-column-rule: 1px dashed #cc0000; -webkit-column-rule: 1px dashed #cc0000; }2
Hiển thị trình duyệt khi có column-count: normal
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-gap với giá trị normal, CSS viết:
p { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-rule: 1px dashed #cc0000; -moz-column-rule: 1px dashed #cc0000; -webkit-column-rule: 1px dashed #cc0000; }3
Hiển thị trình duyệt khi có column-count: normal
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-rule-style: inset, CSS viết:
p { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-rule: 1px dashed #cc0000; -moz-column-rule: 1px dashed #cc0000; -webkit-column-rule: 1px dashed #cc0000; }4
Hiển thị trình duyệt khi có column-rule-style: inset
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-rule-style: none, CSS viết:
p { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-rule: 1px dashed #cc0000; -moz-column-rule: 1px dashed #cc0000; -webkit-column-rule: 1px dashed #cc0000; }5
Hiển thị trình duyệt khi có column-rule-style: none
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-rule-style: none, CSS viết:
p { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-rule: 1px dashed #cc0000; -moz-column-rule: 1px dashed #cc0000; -webkit-column-rule: 1px dashed #cc0000; }6
Hiển thị trình duyệt khi có column-rule-style: none
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-rule-style: none, CSS viết:
p { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-rule: 1px dashed #cc0000; -moz-column-rule: 1px dashed #cc0000; -webkit-column-rule: 1px dashed #cc0000; }7
Hiển thị trình duyệt khi có column-rule-style: none
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-rule-style: none, CSS viết:
p { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-rule: 1px dashed #cc0000; -moz-column-rule: 1px dashed #cc0000; -webkit-column-rule: 1px dashed #cc0000; }8
Hiển thị trình duyệt khi có column-rule-style: none
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-rule-style: none, CSS viết:
Hiển thị trình duyệt khi có column-rule-style: none
Thêm thuộc tính column-rule-style: outset, CSS viết:
p { column-count: 3; -moz-column-count: 3; -webkit-column-count: 3; column-rule: 1px dashed #cc0000; -moz-column-rule: 1px dashed #cc0000; -webkit-column-rule: 1px dashed #cc0000; }9
Hiển thị trình duyệt khi có column-rule-style: outset
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-rule-style: none, CSS viết:
Hiển thị trình duyệt khi có column-rule-style: none
Thêm thuộc tính column-rule-width, CSS viết:
div { columns: 200px; -moz-columns: 200px; -webkit-columns: 200px; -o-columns: 200px; -ms-columns: 200px; }0
Hiển thị trình duyệt khi có column-rule-width:
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-rule-width: medium, CSS viết:
div { columns: 200px; -moz-columns: 200px; -webkit-columns: 200px; -o-columns: 200px; -ms-columns: 200px; }1
Hiển thị trình duyệt khi có column-rule-width: medium
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-rule-width: medium, CSS viết:
div { columns: 200px; -moz-columns: 200px; -webkit-columns: 200px; -o-columns: 200px; -ms-columns: 200px; }2
Hiển thị trình duyệt khi có column-rule-width: medium
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-rule-width: medium, CSS viết:
div { columns: 200px; -moz-columns: 200px; -webkit-columns: 200px; -o-columns: 200px; -ms-columns: 200px; }3
Hiển thị trình duyệt khi có column-rule-width: medium
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-rule-width: medium, CSS viết:
Hiển thị trình duyệt khi có column-rule-width: medium
Thêm thuộc tính column-rule-width: thin, CSS viết:
div { columns: 200px; -moz-columns: 200px; -webkit-columns: 200px; -o-columns: 200px; -ms-columns: 200px; }4
Hiển thị trình duyệt khi có column-rule-width: thin
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thêm thuộc tính column-rule-width: medium, CSS viết:
Hiển thị trình duyệt khi có column-rule-width: medium
Thêm thuộc tính column-rule-width: thin, CSS viết:
Hiển thị trình duyệt khi có column-rule-width: thin
Tieu de 01
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Thêm thuộc tính column-rule-width: thick, CSS viết:
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Hiển thị trình duyệt khi có column-rule-width: thick
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Thuộc tính column-rule
div { columns: 200px; -moz-columns: 200px; -webkit-columns: 200px; -o-columns: 200px; -ms-columns: 200px; }5
Thuộc tính column-rule : Xác định các đường kẻ giữa các cột.
Sử dụng colum-rule, CSS viết:
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Hiển thị trình duyệt khi có column-rule
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Thuộc tính column-span
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Sử dụng colum-span: all, CSS viết:
div { columns: 200px; -moz-columns: 200px; -webkit-columns: 200px; -o-columns: 200px; -ms-columns: 200px; }6
Hiển thị trình duyệt khi có column-span: 1
Tieu de 01
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Tieu de 02
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Tieu de 03
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Sử dụng colum-span: 1, CSS viết:
div { columns: 200px; -moz-columns: 200px; -webkit-columns: 200px; -o-columns: 200px; -ms-columns: 200px; }7
Hiển thị trình duyệt khi có column-span:
Tieu de 01
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Tieu de 02
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Tieu de 03
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3
Sử dụng colum-span: 1, CSS viết:
Hiển thị trình duyệt khi có column-span:
Thuộc tính column-width
div { columns: 200px; -moz-columns: 200px; -webkit-columns: 200px; -o-columns: 200px; -ms-columns: 200px; }8
Thuộc tính column-width : Xác định chiều rộng các cột.
Noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1 noi dung 1
Noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2 noi dung 2
Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3