CSS Cột

Bố cục đa cột CSS

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

Tam quốc diễn nghĩa

Lần đầu tiên
Mời hội hào hùng ở vườn đào ba kết nghĩa

Nói về thế sự thiên hạ, chia lâu nhất định sẽ hợp, hợp lâu nhất định sẽ chia: cuối thời Chu, bảy nước tranh giành, đều nhập vào nhà Tần; sau khi nhà Tần diệt vong, Nam Tần và Hán tranh giành, lại nhập vào nhà Hán; nhà Hán từ khi vua Hán cao vương chặt rắn mà khởi nghĩa, nhất thống thiên hạ, sau đó vua Hán Thục trung hưng, truyền đến vua Hiến Đế, rồi chia thành ba nước. Tìm nguyên nhân dẫn đến sự loạn, có vẻ bắt đầu từ hai vua Hán Huân và Hán Linh. Vua Hán Huân cấm đoán những người tốt, tôn thờ các kẻ quan lại. Khi vua Hán Huân mất, vua Hán Linh lên ngôi, đại tướng quân Tào Vũ, thái phu Trần Phân, cùng nhau giúp đỡ; có các kẻ quan lại như Tào Chú v.v. nắm quyền, Tào Vũ, Trần Phân tính diệt họ, nhưng việc không mật, ngược lại bị họ hại, trung涓 từ đó càng bá đạo. Năm Đ건 Ninh thứ hai, tháng Tư, ngày 15, vua ở trong điện Vạn Đức. Chưa ngồi được, thì gió cuồng bão 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ế. Vua hoảng hốt ngã xuống, người hầu nhanh chóng đưa vào trong cung, các quan đều chạy trốn. Chốc lát, rắn biến mất. Đột nhiên 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 Đ건 Ninh thứ tư, tháng Hai, đất Long Lăng động đất; lại biển dâng, cư dân ven biển, đều bị sóng lớn cuốn vào biển. Năm Quang Hóa nguyên niên, gà mái hóa thành gà trống. Ngày mùng một tháng Sáu, khí đen hơn mười trượng, bay vào điện Vạn Đức. Thu tháng Bảy, có cầu vồng hiện ra ở Đàn Thăng, bờ núi Ngũ Nguyên, đều sụp đổ. Những điều không may mắn này không chỉ một nơi. Vua hạ lệnh hỏi các quan đại thần về nguyên nhân của thiên tai, nghị lang Tào Dung lên tấu, cho rằng sự sụp đổ của cầu vồng và gà mái hóa thành gà trống là do các cung nữ tham chính, lời nói rất thẳng thắn. Vua đọc tấu khen ngợi, vì vậy đứng dậy thay đồ. Tào Chú ở sau lén nhìn, đã thông báo cho mọi người xung quanh; rồi vì những việc khác mà buộc Tào Dung vào tội, đuổi về quê. Sau đó, Tào Lăng, Tiêu Trung, Phương Mô, Đoạn Kỳ, Tào Chú, Hầu Lien, Tấn Thạch, Trình Cường, Hạ Đình, Giao Thắng mười người kết bạn làm điều xấu, được gọi là

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

Thuộc tính đa cột CSS

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

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

Hỗ trợ trình duyệt

Số trong bảng chỉ ra phiên bản trình duyệt đầu tiên hỗ trợ hoàn toàn thuộc tính này.

Thuộc tính Chrome IE Firefox Safari Opera
column-count 50.0 10.0 52.0 9.0 37.0
column-gap 50.0 10.0 52.0 9.0 37.0
column-rule 50.0 10.0 52.0 9.0 37.0
column-rule-color 50.0 10.0 52.0 9.0 37.0
column-rule-style 50.0 10.0 52.0 9.0 37.0
column-rule-width 50.0 10.0 52.0 9.0 37.0
column-span 50.0 10.0 71.0 9.0 37.0
column-width 50.0 10.0 52.0 9.0 37.0

CSS tạo nhiều cột

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

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

Mô hình

div {
  column-count: 3;
}

Thử ngay

CSS chỉ định khoảng cách giữa các cột

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

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

Mô hình

div {
  column-gap: 40px;
}

Thử ngay

CSS quy định cột

column-rule-style Thuộc tính quy định kiểu dáng giữa các cột.

Mô hình

div {
  column-rule-style: solid;
}

Thử ngay

column-rule-width Thuộc tính quy định độ rộng giữa các cột.

Mô hình

div {
  column-rule-width: 1px;
}

Thử ngay

column-rule-color Thuộc tính quy định màu sắc giữa các cột.

Mô hình

div {
  column-rule-color: lightblue;
}

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-*.

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

Mô hình

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

Thử ngay

Xác định phần tử nên vượt qua bao nhiêu cột ngang

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

Xác định độ rộng cột

column-width Thuộc tính xác định độ rộng tối ưu của các cột.

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

Mô hình

div {
  column-width: 100px;
}

Thử ngay

Thuộc tính đa cột CSS

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

Thuộc tính Mô tả
column-count Điều chỉnh số lượng cột mà phần tử nên được chia.
column-fill Điều chỉnh cách lấp đầy các cột.
column-gap Đ指定 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 Điều chỉnh màu sắc giữa các cột.
column-rule-style Điều chỉnh kiểu dáng giữa các cột.
column-rule-width Điều chỉnh độ rộng giữa các cột.
column-span Định nghĩa một yếu tố nên vượt qua bao nhiêu cột.
column-width Đặt kích thước tốt nhất cho cột.
Cột Thuộc tính viết tắt để thiết lập column-width và column-count.