Nếu bạn cần số lượng cột chính xác khi thiết kế bố cục nhiều cột, hãy sử dụng column-count
.
.lead ( column-count: 3; )
Với số lượng cột, trình duyệt sẽ phân phối đồng đều nội dung trong chính xác số cột đó.
Thuộc tính này cũng có thể được sử dụng trong cách viết tắt cho columns
và có thể được sử dụng song song với column-width
. Khi cả hai thuộc tính được khai báo column-count
là số cột tối đa.
Giá trị
column-count
có thể là auto
hoặc một số nguyên.
Sử dụng auto
nếu bạn cũng đang sử dụng column-width
. Hãy coi nó như một cách để nói với trình duyệt, hãy column-width
dẫn đầu.
Số nguyên, còn được gọi là số cột, phải lớn hơn hoặc bằng 0.
Không giống như thuộc column-width
tính này sẽ giữ số lượng cột bất kể chiều rộng của trình duyệt. Điều này có nghĩa là nếu bạn kéo bố cục 5 cột trên điện thoại di động của mình, bạn sẽ có bố cục 5 cột rất nhỏ để điều hướng. column-count
hoạt động tốt nhất cùng với column-width
.
Hỗ trợ trình duyệt
Hỗ trợ bố cục nhiều cột:
Trình duyệt Chrome | Safari | Firefox | Opera | I E | Android | iOS |
---|---|---|---|---|---|---|
Bất kì | 3+ | 1,5+ | 11.1+ | 10+ | 81 | 3.2+ |
Đừng quên các tiền tố của bạn nếu bạn không sử dụng một công cụ hỗ trợ việc đó.