Chiều rộng cột - Thủ thuật CSS

Mục lục

Khi bạn muốn giữ các cột của mình ở một chiều rộng cụ thể, hãy sử dụng column-width.

section ( -webkit-column-width: 200px; -moz-column-width: 200px; column-width: 200px; )

Trình duyệt sẽ tính toán có bao nhiêu cột có chiều rộng ít nhất có thể vừa với không gian. Hãy column-widthcoi đây là gợi ý chiều rộng tối thiểu cho trình duyệt.

column-widthlà một tài sản linh hoạt. Khi trình duyệt không thể phù hợp với ít nhất 2 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.

Thuộc tính này cũng được sử dụng trong cách viết tắt cho columnsvà có thể được sử dụng song song với column-count. Khi cả hai thuộc tính được khai báo column-countlà số cột tối đa.

Giá trị

Bạn có thể đặt column-widththành autohoặc độ dài.

Sử dụng autonếu bạn cũng đang sử dụng column-counthoặc nếu bạn cần tắt thuộc tính. Hãy coi nó như một cách để yêu cầu trình duyệt column-countdẫn đầu.

Để chỉ định chiều rộng của các cột, hãy sử dụng chiều dài lớn hơn (hoặc bằng) 0. Bạn có thể sử dụng bất kỳ đơn vị CSS nào ngoại trừ phần trăm.

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+ 2.3+ 6.1+

Đừng quên tiền tố của bạn!

thú vị bài viết...