Số cột - Thủ thuật CSS

Anonim

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 columnsvà có thể được sử dụng song song với column-width. Khi cả hai thuộc tính được khai báo column-countlà số cột tối đa.

Giá trị

column-countcó thể là autohoặc một số nguyên.

Sử dụng autonế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-widthdẫ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-widthtí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-counthoạ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 đó.