Ngôn ngữ CSS - CSS3 Multi Column
Chia cột trong CSS
Với một văn bản dài, bạn lại muốn hiển thị thành nhiều cột? Thì trước đây, CSS có rất nhiều cách để xây dựng nên một hiển thị dạng Bảng (table) mà không sử dụng đến thẻ table. Nhưng việc này cũng mất khá nhiều dòng lệnh cho HTML & CSS. Nhưng với CSS3 thì việc này dễ dàng hơn nhiều với CSS3 Multiple Columns chỉ cần điều chỉnh cho các thuộc tính thành phần của chúng cho phù hợp.
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ị | Giải thích |
|---|---|
| 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ụ:
<style>
.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;
/* Thuoc tinh column-style */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
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:
<style>
.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;
}
</style>
