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-width
coi đây là gợi ý chiều rộng tối thiểu cho trình duyệt.
column-width
là 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 columns
và có thể được sử dụng song song với column-count
. Khi cả hai thuộc tính được khai báo column-count
là số cột tối đa.
Giá trị
Bạn có thể đặt column-width
thành auto
hoặc độ dài.
Sử dụng auto
nếu bạn cũng đang sử dụng column-count
hoặ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-count
dẫ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!