CSS3 hỗ trợ tính năng Multi Column giúp bạn sắp xếp văn bản dưới dạng cấu trúc một bài báo.

Bảng dưới liệt kê một số thuộc tính Multi Column thường được sử dụng trong CSS3:

Giá trịMiêu tả
column-countĐược sử dụng để đếm số cột mà phần tử nên được phân chia thành
column-fillĐược sử dụng để xác định cách fill dữ liệu vào cột
column-gapĐược sử dụng để xác định khoảng trống giữa các cột
column-ruleĐược sử dụng để xác định một số qui tắc
rule-colorĐược sử dụng để xác định qui tắc màu cho cột
rule-styleĐược sử dụng để xác định qui tắc style cho cột
rule-widthĐược sử dụng để xác định độ rộng
column-spanĐược sử dụng để xác định span giữa các cột
Ví dụ ----- Ví dụ sau minh họa cách sắp xếp văn bản như dưới dạng cấu trúc một tờ báo: ```
Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen. Tra loi bao chi hoi dau thang, Pho chu tich thuong truc VFF Tran Quoc Tuan va HLV Nguyen Huu Thang tung de cap toi kha nang mo cua cho cau thu nhap tich len tuyen. Theo ong Tran Quoc Tuan, nhung cau thu nay neu dap ung duoc yeu cau ve chuyen mon do HLV Nguyen Huu Thang dat rat hi deu co kha nang len tuyen.
```Kết quả là: Nếu bạn muốn giữa các cột không có các đường ngăn cách, bạn có thể xóa thuộc tính rule-style trong ví dụ trên, như dưới đây: ``` .multi { /* Thuoc tinh column-count */ -webkit-column-count: 4; -moz-column-count: 4; column-count: 4; /* Thuoc tinh column-gap */ -webkit-column-gap: 40px; -moz-column-gap: 40px; column-gap: 40px; } ```Kết quả là:− Loạt bài hướng dẫn **Học CSS cơ bản và nâng cao** của chúng tôi dựa trên nguồn tài liệu của: [Tutorialspoint](http://www.tutorialspoint.com/index.htm) và [W3Schools](http://www.w3schools.com/css/)

Viết câu trả lời

Drop Images

0 Bình luận