Thuộc tính chiều rộng cột CSS
Thí dụ
Chỉ định rằng chiều rộng cột phải là 100px:
div
{
column-width: 100px;
}
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 column-width
tính chỉ định chiều rộng cột.
Số cột sẽ là số cột tối thiểu cần thiết để hiển thị tất cả nội dung trên phần tử.
column-width
là một tài sản linh hoạt. Hãy
coi đây column-width
là gợi ý về chiều rộng tối thiểu cho trình duyệt. Khi trình duyệt không thể vừa với ít nhất hai cột ở chiều rộng được chỉ định của bạn thì các cột sẽ dừng lại và thả vào một cột duy nhất.
Giá trị mặc định: | Tự động |
---|---|
Thừa hưởng: | không |
Hoạt hình: | Đúng. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.columnWidth = "100px" |
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 | |||||
---|---|---|---|---|---|
column-width | 50.0 4.0 -webkit- |
10.0 | 52.0 2.0 -moz- |
9.0 3.1 -webkit- |
37.0 15.0 -webkit- 11.1 |
Cú pháp CSS
column-width: auto|length|initial|inherit;
Giá trị tài sản
Value | Description | Play it |
---|---|---|
auto | Default value. The column width will be determined by the browser | |
length | A length that specifies the width of the columns. The number of columns will be the minimum number of columns needed to show all the content across the element. Read about length units | |
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 columnWidth