Thuộc tính column-width

Thuộc tính column-width thiết lập chiều rộng của các cột trong văn bản nhiều cột. Giá trị của thuộc tính là bất kỳ đơn vị đo kích thước nào, ngoại trừ phần trăm, hoặc từ khóa auto (mặc định). Khi giá trị là auto, trình duyệt sẽ tự động chọn chiều rộng tối ưu cho các cột dựa trên column-count và column-gap.

Cú pháp

bộ chọn {
	column-width: giá trị;
}

Ví dụ . Chiều rộng được chỉ định

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

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

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

Ví dụ . Giá trị auto

Trong ví dụ này, văn bản sẽ được chia thành 3 cột (vì column-count được đặt là 3), còn chiều rộng của chúng sẽ được tính toán tự động:

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

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

Xem thêm

thuộc tính column-count,
thiết lập số lượng cột
thuộc tính column-gap,
thiết lập khoảng cách giữa các cột
thuộc tính column-rule,
thiết lập đường viền giữa các cột
thuộc tính column-span,
thiết lập số cột mà một phần tử được trải dài qua
thuộc tính columns,
là thuộc tính viết tắt cho việc tạo bố cục nhiều cột