CSS nhiều cột
Bố cục nhiều cột CSS
Bố cục nhiều cột CSS cho phép dễ dàng xác định nhiều cột văn bản - giống như trong báo:
Ping hàng ngày
Lorem ipsum
dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Với điều kiện tối thiểu là có thể thực hiện được, điều này sẽ không thể thực hiện được khi bạn bị lobortis lobortis và không có đủ tiền sau mỗi giao dịch. Duis autem vel eum iriure dolor in hendrerit in vulputate velit esse molestie consequat, vel illum dolore eu feugiat nulla facilisis at vero eros et accumsan et iusto odio dignissim qui blandit praesent luptatum zzril delenit augue duis dolore te feugait nulla facilisi. Nam tự do tạm thời kiêm soluta nobis eleifend tùy chọn congue nihil imperdiet doming id quod mazim placerat facer possim assum.
Thuộc tính nhiều cột CSS
Trong chương này, bạn sẽ tìm hiểu về các thuộc tính nhiều cột sau:
-
column-count -
column-gap -
column-rule-style -
column-rule-width -
column-rule-color -
column-rule -
column-span -
column-width
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.
| Property | |||||
|---|---|---|---|---|---|
| column-count | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-gap | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-color | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-style | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-rule-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
| column-span | 50.0 | 10.0 | 71.0 | 9.0 | 37.0 |
| column-width | 50.0 | 10.0 | 52.0 | 9.0 | 37.0 |
CSS Tạo Nhiều Cột
Thuộc tính column-count chỉ định số cột mà một phần tử sẽ được chia thành.
Ví dụ sau sẽ chia văn bản trong phần tử <div> thành 3 cột:
CSS Chỉ định khoảng cách giữa các cột
Thuộc tính column-gap chỉ định khoảng cách giữa các cột.
Ví dụ sau chỉ định khoảng cách 40 pixel giữa các cột:
Quy tắc cột CSS
Thuộc tính column-rule-style chỉ định kiểu của quy tắc giữa các cột:
Thuộc tính column-rule-width chỉ định độ rộng của quy tắc giữa các cột:
Thuộc tính column-rule-color chỉ định màu của quy tắc giữa các cột:
Thuộc tính column-rule là thuộc tính tốc ký để đặt tất cả các thuộc tính quy tắc cột-* ở trên.
Ví dụ sau đặt chiều rộng, kiểu và màu của quy tắc giữa các cột:
Chỉ định số cột mà một phần tử nên trải dài
Thuộc tính column-span chỉ định số lượng cột mà một phần tử sẽ trải qua.
Ví dụ sau chỉ định rằng phần tử <h2> phải trải rộng trên tất cả các cột:
Chỉ định chiều rộng cột
Thuộc tính column-width chỉ định chiều rộng tối ưu được đề xuất cho các cột.
Ví dụ sau chỉ định rằng chiều rộng tối ưu được đề xuất cho các cột phải là 100px:
Thuộc tính nhiều cột CSS
Bảng sau liệt kê tất cả các thuộc tính nhiều cột:
| Property | Description |
|---|---|
| column-count | Specifies the number of columns an element should be divided into |
| column-fill | Specifies how to fill columns |
| column-gap | Specifies the gap between the columns |
| column-rule | A shorthand property for setting all the column-rule-* properties |
| column-rule-color | Specifies the color of the rule between columns |
| column-rule-style | Specifies the style of the rule between columns |
| column-rule-width | Specifies the width of the rule between columns |
| column-span | Specifies how many columns an element should span across |
| column-width | Specifies a suggested, optimal width for the columns |
| columns | A shorthand property for setting column-width and column-count |
