Thuộc tính cột CSS
Thí dụ
Chỉ định chiều rộng tối thiểu cho mỗi cột và số cột tối đa:
div
{
columns: 100px 3;
}
Thêm các ví dụ "Hãy tự mình thử" bên dưới.
Định nghĩa và Cách sử dụng
Thuộc columns
tính này là một thuộc tính viết tắt cho:
Phần chiều rộng cột sẽ xác định chiều rộng tối thiểu cho mỗi cột, trong khi phần đếm cột sẽ xác định số cột tối đa. Bằng cách sử dụng thuộc tính này, bố cục nhiều cột sẽ tự động chia nhỏ thành một cột duy nhất ở độ rộng trình duyệt hẹp mà không cần truy vấn phương tiện hoặc các quy tắc khác.
Giá trị mặc định: | xe ô tô |
---|---|
Thừa hưởng: | không |
Hoạt hình: | có, hãy xem các thuộc tính riêng lẻ . Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.columns = "100px 3" |
Hỗ trợ trình duyệt
Các số trong bảng chỉ định phiên bản trình duyệt đầu tiên hỗ trợ đầy đủ thuộc tính.
Các số theo sau -webkit- hoặc -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
columns | 50.0 4.0 -webkit- |
10.0 | 52.0 9.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
Cú pháp CSS
columns: auto|column-width column-count|initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
auto | Default value. Sets both the column-width and column-count to "auto" |
column-width | Defines the minimum width for each column |
column-count | Defines the maximum number of columns |
initial | Sets this property to its default value. Read about initial |
inherit | Inherits this property from its parent element. Read about inherit |
Các ví dụ khác
Thí dụ
Chia văn bản trong phần tử <div> thành ba cột:
div
{
column-count: 3;
}
Thí dụ
Chỉ định khoảng cách 40 pixel giữa các cột:
div
{
column-gap: 40px;
}
Thí dụ
Chỉ định chiều rộng, kiểu và màu của quy tắc giữa các cột:
div
{
column-rule: 4px double #ff00ff;
}
Các trang liên quan
Hướng dẫn CSS: CSS Nhiều Cột
Tham chiếu DOM HTML: thuộc tính cột