Thuộc tính điền vào cột CSS
Thí dụ
Chỉ định cách điền vào các cột:
.newspaper1 {
column-fill: auto;
}
.newspaper2 {
column-fill: balance;
}
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-fill
tính chỉ định cách điền vào các cột, cân bằng hay không.
Mẹo: Nếu bạn thêm chiều cao vào phần tử nhiều cột, bạn có thể kiểm soát cách nội dung lấp đầy các cột. Nội dung có thể được cân bằng hoặc điền tuần tự.
Giá trị mặc định: | thăng bằng |
---|---|
Thừa hưởng: | không |
Hoạt hình: | không. Đọc về hoạt hình |
Phiên bản: | CSS3 |
Cú pháp JavaScript: | đối tượng .style.columnFill = "auto" |
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 là -moz- chỉ định phiên bản đầu tiên hoạt động với tiền tố.
Property | |||||
---|---|---|---|---|---|
column-fill | 50.0 | 10.0 | 52.0 13.0 -moz- |
10.0 7.0 -webkit- |
37.0 |
Cú pháp CSS
column-fill: balance|auto|initial|inherit;
Giá trị tài sản
Value | Description |
---|---|
balance | Default value. Fills each column with about the same amount of content, but will not allow the columns to be taller than the height (so, columns might be shorter than the height as the browser distributes the content evenly horizontally) |
auto | Fills each column until it reaches the height, and do this until it runs out of content (so, this value will not necessarily fill all the columns nor fill them evenly) |
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 columnFill