Thuộc tính column-count

Thuộc tính column-count xác định số lượng cột được đề xuất trong văn bản nhiều cột. Số lượng thực tế của chúng có thể khác với số lượng đã chỉ định, tùy thuộc vào chiều rộng cột và kích thước khoảng cách giữa chúng.

Cú pháp

bộ chọn {
	column-count: số | auto;
}

Giá trị

Giá trị	Mô tả
số	Xác định số lượng cột đã chỉ định. Chính xác hơn là đề xuất cho trình duyệt sử dụng số lượng cột này, vì số lượng thực tế của chúng có thể khác với số lượng đã chỉ định, tùy thuộc vào chiều rộng cột và kích thước khoảng cách giữa chúng.
`auto`	Trình duyệt tự động chọn số lượng cột tối ưu.

Giá trị mặc định: auto.

Ví dụ

Trong ví dụ này, văn bản sẽ được chia thành 3 cột (tất nhiên, trong các trình duyệt hỗ trợ bố cục nhiều cột, trong các trình duyệt khác sẽ chỉ là văn bản thông thường trong một cột):

<div id="elem">
	some long text
</div>

#elem {
	column-count: 3;
	text-align: justify;
}

Ví dụ . Giá trị auto

Trong ví dụ này, chiều rộng cột column-width được đặt là 150px, và số lượng của chúng column-count được đặt thành giá trị auto - trình duyệt sẽ tự động chọn số lượng cột cần thiết và khoảng cách giữa chúng:

<div id="elem">
	some long text
</div>

#elem {
	column-count: auto;
	column-width: 150px;
	text-align: justify;
}

Xem thêm

thuộc tính column-width,
xác định chiều rộng cột
thuộc tính column-gap,
xác định khoảng cách giữa các cột
thuộc tính column-rule,
xác định đường viền giữa các cột
thuộc tính column-span,
xác định số lượng cột mà phần tử sẽ trải dài qua
thuộc tính columns,
là thuộc tính viết tắt cho bố cục nhiều cột