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:

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.

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
Internet Explorer Firefox Opera Chrome Safari IOS Android Window phone
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