Chia Cột Trong CSS

Trang chủ » Chia Cột Văn Bản Html » Chia Cột Trong CSS

Có thể bạn quan tâm

Chia cột trong CSS Trang trước Trang sau

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ụ

Quảng cáo

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; } Quảng cáo

Kết quả là:−

👉 Giải bài nhanh với AI Hay:

Đã có app VietJack trên điện thoại, giải bài tập SGK, SBT Soạn văn, Văn mẫu, Thi online, Bài giảng....miễn phí. Tải ngay ứng dụng trên Android và iOS. Theo dõi chúng tôi miễn phí trên mạng xã hội facebook và youtube:

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 vietjack.com:

  • Cú pháp CSS
  • CSS - Include CSS vào HTML
  • CSS - Màu (Color)
  • CSS - Background
  • CSS - Định dạng Font
  • CSS - Hình ảnh
  • CSS - Trang trí Link
  • CSS - Bảng
  • CSS - Đường viền (Border)
  • CSS - Căn lề (Margin)
  • CSS - Padding
Trang trước Trang sau Bài viết liên quan

  • 160 bài học ngữ pháp tiếng Anh hay nhất

  • 155 bài học Java tiếng Việt hay nhất

  • 100 bài học Android tiếng Việt hay nhất

  • 247 bài học CSS tiếng Việt hay nhất

  • 197 thẻ HTML cơ bản

  • 297 bài học PHP

  • 101 bài học C++ hay nhất

  • 97 bài tập C++ có giải hay nhất

  • 208 bài học Javascript có giải hay nhất

Từ khóa » Chia Cột Văn Bản Html