Multi Column trong CSS | Chia cột trong CSS PDF chia cot trong css3
Bạn đang xem bản rút gọn của tài liệu. Xem và tải ngay bản đầy đủ của tài liệu tại đây (143.71 KB, 2 trang )
Copyright
©
vietjack.com
Chia cột trong CSS
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:
<html>
<head>
<style>
.multi {
/* Thuoc tinh
column-count */
-webkit-column-count: 4;
-moz-columncount: 4;
column-count: 4;
/* Thuoc tinh
column-gap */
-webkit-column-gap: 40px;
-moz-columngap: 40px;
column-gap: 40px;
/* Thuoc
tinh column-style */
-webkit-column-rule-style: solid;
-moz-column-rule-style: solid;
column-rule-style: solid;
}
</style>
</head>
<body>
<div class="multi">
Trang
chia
sẻ
các
bài
học
online
miễn
phí
Copyright
©
vietjack.com
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.
</div>
</body> </html>
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;
-mozcolumn-count: 4;
column-count: 4;
/* Thuoc tinh column-gap */
webkit-column-gap: 40px;
-moz-column-gap: 40px;
column-gap: 40px; }
Kết quả là:−
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.
Trang
chia
sẻ
các
bài
học
online
miễn
phí
