CSS Multi-column

Bố cục nhiều cột CSS

Bố cục nhiều cột CSS cho phép chúng ta dễ dàng định nghĩa văn bản nhiều cột - giống như báo vậy:

Truyện Tam Quốc

Lần đầu tiên
Tiệc Yên Đô liêu hào ba kết nghĩa
Chặt đầu anh hùng黄巾 lập công
Nói về xu thế của thế giới, sau khi chia sẽ lại hợp, sau khi hợp sẽ lại chia: vào cuối thời nhà Chu, bảy nước tranh giành, đều bị hợp vào nhà Tần; sau khi nhà Tần diệt vong, nước Tần và nước Hán tranh giành, lại hợp vào nhà Hán; nhà Hán từ khi高組斩白蛇而起义, một统天下, sau đó nhà Tiền Thú khai quốc, truyền đến nhà Hiến Đế, rồi chia thành ba nước. Tìm nguyên nhân gây ra sự hỗn loạn, có lẽ bắt đầu từ hai vị hoàng đế Huân và Linh. Hoàng đế Huân cấm người giỏi, tôn trọng các kẻ quan lại. Khi hoàng đế Huân băng hà, hoàng đế Linh lên ngôi, đại tướng quân Đạo Vũ, thái phu Trân Phân, cùng nhau giúp đỡ; có kẻ quan lại như Eo Kết quyền hành, Đạo Vũ và Trân Phân âm mưu giết họ, nhưng việc này không kín đáo, ngược lại bị họ hại, trung quan từ đó càng ngang ngược. Năm Đ건宁 thứ hai, tháng Tư, ngày trăng rằm, hoàng đế lên ngôi ở điện Thiên Đức. Chưa ngồi vào ghế, thì gió lốc từ góc điện bỗng nổi lên, chỉ thấy một con rắn xanh lớn bay từ xà xuống, quấn trên ghế. Hoàng đế hoảng ngạc ngã xuống, người hầu cứu vào cung, các quan lại đều chạy trốn. Chốc lát, rắn biến mất. Đột nhiên có mưa lớn, kèm theo băng sương, rơi đến nửa đêm mới ngừng, hủy diệt nhiều ngôi nhà. Năm Đ건宁 thứ tư, tháng Hai, đất Long Lăng động chấn; lại có biển dâng, cư dân ven biển đều bị sóng cuốn vào biển. Năm Thang Hóa thứ nhất, gà mái hóa thành gà trống. Ngày mùng một tháng Sáu, có mây đen cao hơn mười trượng bay vào điện Thiên Đức. Tháng Bảy, có quang vũ hiện ra ở điện Ngọc Thang, bờ sông Ngũ Nguyên toàn bộ nứt ra. Những điều không may mắn này không chỉ một nơi. Hoàng đế ban lệnh hỏi các quan lại về nguyên nhân của thiên tai, nghị lang Tô Dung lên tấu, cho rằng vì sự xâm nhập vào chính trị của các thiếp, lời nói rất thẳng thắn. Hoàng đế đọc tấu khen ngợi, vì vậy đứng dậy thay áo. Eo Kết ở sau lén nhìn, toàn bộ thông báo cho mọi người; sau đó vì điều khác mà buộc Tô Dung vào tội, trả về quê nhà. Sau đó, Tăng Lượng, Tiêu Trung, Phan Vu, Đạo Quân, Eo Kết, Hầu Lien, Thiệu Thoại, Chương Khang, Hạ Vân, Kuo Thắng mười người đồng谋 ác, gọi là 'mười thường侍'. Hoàng đế tôn trọng Tăng Lượng, gọi là 'ông cha'. Chính trị ngày càng không tốt, dẫn đến lòng người trong thiên hạ muốn loạn, kẻ trộm cướp nổi lên như ong ruồi.

...... ......

Thuộc tính nhiều cột CSS

...... ......

  • column-count
  • column-gap
  • column-rule-style
  • column-rule-width
  • column-rule-color
  • column-rule
  • column-span
  • column-width

Trong chương này, bạn sẽ học được các thuộc tính nhiều cột sau:

Hỗ trợ trình duyệt

Thuộc tính Số trong bảng cho biết phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này. Chrome IE Firefox Safari
column-count 71.0 50.0 10.0 52.0 9.0
column-gap 71.0 50.0 10.0 52.0 9.0
column-rule 71.0 50.0 10.0 52.0 9.0
column-rule-color 71.0 50.0 10.0 52.0 9.0
column-rule-style 71.0 50.0 10.0 52.0 9.0
column-rule-width 71.0 50.0 10.0 52.0 9.0
column-span 71.0 50.0 Opera 52.0 9.0
column-width 71.0 50.0 10.0 52.0 9.0

37.0

column-count CSS Tạo nhiều cột

Thuộc tính quy định số lượng cột mà phần tử nên được chia.

Mô hình

div {
  Dưới đây là ví dụ chia văn bản trong phần tử <div> thành 3 cột:
}

Thử ngay

column-count: 3;

column-gap CSS Định nghĩa khoảng cách giữa các cột

Thuộc tính quy định khoảng cách giữa các cột.

Mô hình

div {
  Dưới đây là ví dụ chỉ định khoảng cách giữa các cột là 40 pixel:
}

Thử ngay

column-gap: 40px;

column-rule-style CSS Quy tắc cột

Mô hình

div {
  Thuộc tính quy định phong cách của các quy tắc giữa các cột:
}

Thử ngay

column-rule-width column-rule-style: solid;

Mô hình

div {
  Thuộc tính quy định độ rộng của các quy tắc giữa các cột:
}

Thử ngay

column-rule-color column-rule-width: 1px;

Mô hình

div {
  Thuộc tính quy định màu sắc của các quy tắc giữa các cột:
}

Thử ngay

Thuộc tính column-rule là thuộc tính viết tắt để thiết lập tất cả các thuộc tính column-rule-* trên.

Dưới đây là ví dụ thiết lập độ rộng, phong cách và màu sắc của các quy tắc giữa các cột:

Mô hình

div {
  column-rule: 1px solid lightblue;
}

Thử ngay

Định nghĩa phần tử nên vượt qua bao nhiêu cột

column-span Thuộc tính quy định phần tử nên vượt qua bao nhiêu cột.

Dưới đây là ví dụ quy định phần tử <h2> nên vượt qua tất cả các cột:

Mô hình

h2 {
  column-span: all;
}

Thử ngay

Định nghĩa độ rộng cột

column-width Thuộc tính xác định độ rộng khuyến nghị tốt nhất của các cột.

Dưới đây là ví dụ quy định độ rộng khuyến nghị của các cột nên là 100px:

Mô hình

div {
  column-width: 100px;
}

Thử ngay

Thuộc tính nhiều cột CSS

Bảng dưới đây liệt kê tất cả các thuộc tính nhiều cột:

Thuộc tính Mô tả
column-count Định nghĩa số lượng cột mà phần tử nên được chia.
column-fill Định nghĩa cách lấp đầy các cột.
column-gap Định nghĩa khoảng cách giữa các cột.
column-rule Được sử dụng để thiết lập thuộc tính viết tắt cho tất cả các thuộc tính column-rule-*.
column-rule-color Định nghĩa màu sắc của các quy tắc giữa các cột.
column-rule-style Định nghĩa phong cách giữa các cột.
column-rule-width Định nghĩa độ rộng giữa các cột.
column-span Specify how many columns an element should span.
column-width Specify the best width for the columns.
columns Abbreviated properties for setting column-width and column-count.