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

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-awidth Đượ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-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>
      
   </head>
   <body>
   
      <div class="multi">
      	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;
   -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à:−

Follow fanpage của team https://www.facebook.com/vietjackteam/ hoặc facebook cá nhân Nguyễn Thanh Tuyền https://www.facebook.com/tuyen.vietjack để tiếp tục theo dõi các loạt bài mới nhất về Java,C,C++,Javascript,HTML,Python,Database,Mobile.... mới nhất của chúng tôi.

Bài học CSS phổ biến khác tại code24h.com:

Bài liên quan

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

Tạ Quốc Bảo viết 12:38 ngày 14/08/2018

Tìm hiểu về Biến trong CSS

Sử dụng biến trong CSS Những website lớn thường sẽ sử dụng rất nhiều CSS với lượng lớn giá trị bị lặp lại. Giả sử khi bạn muốn sửa màu chủ đạo của website thì rất có khả năng bạn sẽ phải sửa ở rất nhiều vị trí ví dụ như button, navbar, title,.... Điều này gây ra rất nhiều khó khăn khi code cũng ...

Tạ Quốc Bảo viết 20:18 ngày 11/08/2018

Bài 14: After và Before trong CSS

Trong CSS có hai thuộc tính dùng để bổ sung thành phần vào đằng trước và đằng sau thẻ HTML đó là thuộc tính after và before, hai thuộc tính này ...

Hoàng Hải Đăng viết 09:53 ngày 03/08/2018

Bài 12: Position Fixed trong CSS

Hôm nay mình sẽ trình bày một thuộc tính khá hay trong CSS đó là thuộc tính position fixed trong CSS . Đây là một thuộc tính hay sử dụng và có ...

Tạ Quốc Bảo viết 09:52 ngày 03/08/2018

Bài 15: Kỹ thuật ClearFix trong CSS

Trong bài tìm hiểu thuộc tính float thì mình có sử dụng sơ qua về kỹ thuật ClearFix này rồi nhưng không chi tiết lắm, vì vậy trong bài này mình sẽ ...

Trịnh Tiến Mạnh viết 09:49 ngày 03/08/2018
0