Đị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:
| Thuộc tính | giá trị | Ví dụ | Mô tả |
|---|---|---|---|
| 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-count: 3; | Xác định số lượng cho cột. |
| 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 | đơn vị | 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; | ||
| outset | column-rule-style: outset; | ||
| ridge | column-rule-style: ridge; | ||
| solid | column-rule-style: solid; | ||
| column-rule-color | Màu sắc | column-rule-color: #cc0000; | Thiết lập màu của các đường kẻ giữa các cột. |
| column-rule-width | đơn vị | column-rule-width: 200px; | Xác định chiều rộng cho các đường kẻ giữa các cột. |
| medium | column-rule-width: medium; | Xác định chiều rộng trung bình của các đường kẻ giữa các . | |
| thin | column-rule-width: thin; | Xác định các đường kẻ nhỏ. | |
| thick | column-rule-width: thick; | Xác định các đường kẻ dày. | |
| column-rule | đơn vị | column-rule: 200px solid #cc0000; | Xác định chiều rộng các đường kẻ cho cột. |
| Kiểu | Thiết lập kiểu của các đường kẻ giữa các cột. | ||
| Màu sắc | Thiết lập màu của các đường kẻ giữa các cột. | ||
| column-span | 1 | column-span: 1; | Xác định thành phần nằm trong 1 cột. |
| all | column-span: all; | Xác định thành phần nằm trải dài tất cả các cột. | |
| column-width | đơn vị | column-width: 200px; | Xác định chiều rộng cho cột. |
| auto | column-width: auto; | Chiều rộng cột sẽ được quyết định bởi trình duyệt. |
Ví dụ
HTML viết:
<html> <head></head> <body> <p>column rule</p> </body> </html>
Hiển thị trình duyệt khi chưa có CSS:
column rule
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;
}
Hiển thị trình duyệt khi có CSS:
column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule column rule
Trình duyệt và hệ điều hành hỗ trợ
Yêu cầu phiên bản trình duyệt và hệ điều hành tối thiểu được hỗ trợ cho thuộc tính column:
| Trình duyệt PC | Smartphone - Tablets | |||||||
 |
 |
 |
 |
 |
 |
 |
 |
|
| column | 10 | 11 -moz- |
11 | 18 -webkit- |
5.1 -webkit- |
3.2 -webkit- |
2.1 -webkit- |
8 |
| column-count | 10 | 11 -moz- |
11 | 18 -webkit- |
5.1 -webkit- |
3.2 -webkit- |
2.1 -webkit- |
8 |
| column-gap | 10 | 11 -moz- |
11 | 18 -webkit- |
5.1 -webkit- |
3.2 -webkit- |
2.1 -webkit- |
8 |
| column-rule-style | 10 | 11 -moz- |
11 | 18 -webkit- |
5.1 -webkit- |
3.2 -webkit- |
2.1 -webkit- |
8 |
| column-rule-color | 10 | 11 -moz- |
11 | 18 -webkit- |
5.1 -webkit- |
3.2 -webkit- |
2.1 -webkit- |
8 |
| column-rule-width | 10 | 11 -moz- |
11 | 18 -webkit- |
5.1 -webkit- |
3.2 -webkit- |
2.1 -webkit- |
8 |
| column-rule | 10 | 11 -moz- |
11 | 18 -webkit- |
5.1 -webkit- |
3.2 -webkit- |
2.1 -webkit- |
8 |
| column-span | 10 | 11 -moz- |
11 | 18 -webkit- |
5.1 -webkit- |
3.2 -webkit- |
2.1 -webkit- |
8 |
| column-width | 10 | 11 -moz- |
11 | 18 -webkit- |
5.1 -webkit- |
3.2 -webkit- |
2.1 -webkit- |
8 |