Thuộc tính columns
Thuộc tính columns: Xác định chiều rộng và số lượng cột.
HTML viết:
<html>
<head></head>
<body>
<div>
<p>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</p>
<p>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</p>
<p>Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3</p>
</body>
</html>
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
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 { columns: 4; -moz-columns: 4; -webkit-columns: 4; -o-columns: 4; -ms-columns: 4; }
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
Nếu chiều rộng không được khai báo, mà khai báo số nguyên thì số nguyên chính là số cột.
Thuộc tính column-count
Thuộc tính column-count : Xác định số lượng cho cột.
Thêm thuộc tính column-count, 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ó column-count:
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-count với giá trị auto, 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ó column-count: auto
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
Thuộc tính column-gap
Thuộc tính column-gap : Xác định số lượng cho cột.
Thêm thuộc tính column-gap, CSS viế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; }
Hiển thị trình duyệt khi có column-gap:
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
Trả lại khoảng cách các cột như bình thường.
Thuộc tính column-rule-style
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.
Thêm thuộc tính column-rule-style: dashed, CSS viết:
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; }
Hiển thị trình duyệt khi có column-rule-style: dashed
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: dotted, CSS viết:
div { columns: 3; column-rule-style: dotted; -moz-columns: 3; -moz-column-rule-style: dotted; -webkit-columns: 3; -webkit-column-rule-style: dotted; -o-columns: 3; -o-column-rule-style: dotted; -ms-columns: 3; -ms-column-rule-style: dotted; }
Hiển thị trình duyệt khi có column-rule-style: dotted
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: double, CSS viết:
div { columns: 3; column-rule-style: double; -moz-columns: 3; -moz-column-rule-style: double; -webkit-columns: 3; -webkit-column-rule-style: double; -o-columns: 3; -o-column-rule-style: double; -ms-columns: 3; -ms-column-rule-style: double; }
Hiển thị trình duyệt khi có column-rule-style: double
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: groove, CSS viết:
div { columns: 3; column-rule-style: groove; -moz-columns: 3; -moz-column-rule-style: groove; -webkit-columns: 3; -webkit-column-rule-style: groove; -o-columns: 3; -o-column-rule-style: groove; -ms-columns: 3; -ms-column-rule-style: groove; }
Hiển thị trình duyệt khi có column-rule-style: groove
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: hidden, CSS viết:
div { columns: 3; column-rule-style: hidden; -moz-columns: 3; -moz-column-rule-style: hidden; -webkit-columns: 3; -webkit-column-rule-style: hidden; -o-columns: 3; -o-column-rule-style: hidden; -ms-columns: 3; -ms-column-rule-style: hidden; }
Hiển thị trình duyệt khi có column-rule-style: hidden
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:
div { columns: 3; column-rule-style: inset; -moz-columns: 3; -moz-column-rule-style: inset; -webkit-columns: 3; -webkit-column-rule-style: inset; -o-columns: 3; -o-column-rule-style: inset; -ms-columns: 3; -ms-column-rule-style: inset; }
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:
div { columns: 3; column-rule-style: none; -moz-columns: 3; -moz-column-rule-style: none; -webkit-columns: 3; -webkit-column-rule-style: none; -o-columns: 3; -o-column-rule-style: none; -ms-columns: 3; -ms-column-rule-style: none; }
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: outset, CSS viết:
div { columns: 3; column-rule-style: outset; -moz-columns: 3; -moz-column-rule-style: outset; -webkit-columns: 3; -webkit-column-rule-style: outset; -o-columns: 3; -o-column-rule-style: outset; -ms-columns: 3; -ms-column-rule-style: outset; }
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: ridge, CSS viết:
div { columns: 3; column-rule-style: ridge; -moz-columns: 3; -moz-column-rule-style: ridge; -webkit-columns: 3; -webkit-column-rule-style: ridge; -o-columns: 3; -o-column-rule-style: ridge; -ms-columns: 3; -ms-column-rule-style: ridge; }
Hiển thị trình duyệt khi có column-rule-style: ridge
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: solid, CSS viết:
div { columns: 3; column-rule-style: solid; -moz-columns: 3; -moz-column-rule-style: solid; -webkit-columns: 3; -webkit-column-rule-style: solid; -o-columns: 3; -o-column-rule-style: solid; -ms-columns: 3; -ms-column-rule-style: solid; }
Hiển thị trình duyệt khi có column-rule-style: solid
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
Thuộc tính column-rule-color
Thuộc tính column-rule-color : Thiết lập màu của các đường kẻ giữa các cột.
Thêm thuộc tính column-rule-color, CSS viết:
div { columns: 3; column-rule-style: solid; column-rule-color: #cc0000; -moz-columns: 3; -moz-column-rule-style: solid; -moz-column-rule-color: #cc0000; -webkit-columns: 3; -webkit-column-rule-style: solid; -webkit-column-rule-color: #cc0000; -o-columns: 3; -o-column-rule-style: solid; -o-column-rule-color: #cc0000; -ms-columns: 3; -ms-column-rule-style: solid; -ms-column-rule-color: #cc0000; }
Hiển thị trình duyệt khi có column-rule-color:
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
Thuộc tính column-rule-width
Thuộc tính column-rule-width : Thiết lập chiều rộng của các đường kẻ giữa các cột.
Thêm thuộc tính column-rule-width, CSS viết:
div { columns: 3; column-rule-style: solid; column-rule-width: 5px; -moz-columns: 3; -moz-column-rule-style: solid; -moz-column-rule-width: 5px; -webkit-columns: 3; -webkit-column-rule-style: solid; -webkit-column-rule-width: 5px; -o-columns: 3; -o-column-rule-style: solid; -o-column-rule-width: 5px; -ms-columns: 3; -ms-column-rule-style: solid; -ms-column-rule-width: 5px; }
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: 3; column-rule-style: solid; column-rule-width: medium; -moz-columns: 3; -moz-column-rule-style: solid; -moz-column-rule-width: medium; -webkit-columns: 3; -webkit-column-rule-style: solid; -webkit-column-rule-width: medium; -o-columns: 3; -o-column-rule-style: solid; -o-column-rule-width: medium; -ms-columns: 3; -ms-column-rule-style: solid; -ms-column-rule-width: medium; }
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: thin, CSS viết:
div { columns: 3; column-rule-style: solid; column-rule-width: thin; -moz-columns: 3; -moz-column-rule-style: solid; -moz-column-rule-width: thin; -webkit-columns: 3; -webkit-column-rule-style: solid; -webkit-column-rule-width: thin; -o-columns: 3; -o-column-rule-style: solid; -o-column-rule-width: thin; -ms-columns: 3; -ms-column-rule-style: solid; -ms-column-rule-width: thin; }
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: thick, CSS viết:
div { columns: 3; column-rule-style: solid; column-rule-width: thick; -moz-columns: 3; -moz-column-rule-style: solid; -moz-column-rule-width: thick; -webkit-columns: 3; -webkit-column-rule-style: solid; -webkit-column-rule-width: thick; -o-columns: 3; -o-column-rule-style: solid; -o-column-rule-width: thick; -ms-columns: 3; -ms-column-rule-style: solid; -ms-column-rule-width: thick; }
Hiển thị trình duyệt khi có column-rule-width: thick
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
Thuộc tính column-rule
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:
div { columns: 3; column-rule: 5px double #0000cc; -moz-columns: 3; -moz-column-rule: 5px double #0000cc; -webkit-columns: 3; -webkit-column-rule: 5px double #0000cc; -o-columns: 3; -o-column-rule: 5px double #0000cc; -ms-columns: 3; -ms-column-rule: 5px double #0000cc; }
Hiển thị trình duyệt khi có column-rule
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
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:
<html>
<head></head>
<body>
<div>
<h3>Tieu de 01</h3>
<p>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</p>
<h3>Tieu de 02</h3>
<p>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</p>
<h3>Tieu de 03</h3>
<p>Noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3 noi dung 3</p>
</body>
</html>
CSS viết:
div { columns: 3; -moz-columns: 3; -webkit-columns: 3; -o-columns: 3; -ms-columns: 3; } h3 { background: #cccccc; }
Hiển thị trình duyệt khi chưa 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: all, CSS viết:
div { columns: 3; column-span: all; -moz-columns: 3; -moz-column-span: all; -webkit-columns: 3; -webkit-column-span: all; -o-columns: 3; -o-column-span: all; -ms-columns: 3; -ms-column-span: all; } h3 { background: #cccccc; }
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: 3; column-span: 1; -moz-columns: 3; -moz-column-span: 1; -webkit-columns: 3; -webkit-column-span: 1; -o-columns: 3; -o-column-span: 1; -ms-columns: 3; -ms-column-span: 1; } h3 { background: #cccccc; }
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
Thuộc tính column-width
Thuộc tính column-width : Xác định chiều rộng các cột.
Sử dụng colum-width, CSS viết:
div { columns: 3; column-width: 200px; -moz-columns: 3; -moz-column-width: 200px; -webkit-columns: 3; -webkit-column-width: 200px; -o-columns: 3; -o-column-width: 200px; -ms-columns: 3; -ms-column-width: 200px; }
Hiển thị trình duyệt khi có column-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