Nhiều cột - Thủ thuật CSS

Đây là một ví dụ về một lớp ba cột đơn giản:

.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; )

Trong số đó bạn sẽ áp dụng cho một khối văn bản như vậy:


Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum erat wisi, condimentum sed, commodo vitae, ornare sit amet, wisi. Aenean fermentum, elit eget tincidunt condimentum, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim in turpis pulvinar facilisis. Ut felis. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, facilisis luctus, metus

Thí dụ

Môi trường sống của cây Pastyesque morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tra tấn quam, feugiat vitae, ultricies eget, tempor sit amet, ante. Donec eu libero sit amet quam egestas semper. Aenean ultricies mi vitae est. Mauris placerat eleifend leo. Quisque sit amet est et sapien ullamcorper pharetra. Vestibulum eratarteri, condimentum sed, rowo vitae, ornare sit amet, Wisdomi. Aenean lên men, elit eget tincidunt gia vị, eros ipsum rutrum orci, sagittis tempus lacus enim ac dui. Donec non enim trong turpis pulvinar Operatingisis. Út felis. Praesent dapibus, neque id cursus faucibus, tra tấn neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accumsan porttitor, Smoothisis luctus, metus

Lưu ý rằng chiều cao của mỗi cột được tự động cân bằng, theo thông số kỹ thuật.

Cũng lưu ý rằng bản demo và mã mẫu này đang sử dụng tiền tố của nhà cung cấp moz và webkit, chỉ hoạt động trong trình duyệt Gecko (Firefox 1.5+, et al.) Và Webkit (Safari 3+, Chrome, et al.). Chưa có hỗ trợ gốc nào trong Internet Explorer hoặc Opera mà tôi biết.

Tất cả các thuộc tính liên quan

.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap : 20px; -moz-column-rule-color: #ccc; -moz-column-rule-style: solid; -moz-column-rule-width: 1px; -webkit-column-rule-color: #ccc; -webkit-column-rule-style: solid ; -webkit-column-rule-width: 1px; )

Bạn cũng có thể đặt column-width(với các tiền tố) nhưng nhìn chung sẽ hợp lý hơn nếu để nó tự động tính toán điều đó.

Quy tắc (“quy tắc”, như trong một dòng) sẽ chia khoảng cách xuống giữa. Bạn có thể sử dụng các giá trị giống như cách bạn làm a border.

Hãy chú ý không để các khối văn bản của bạn quá cao đến mức chúng cao hơn cửa sổ trình duyệt (khá nhỏ), nếu không thì vấn đề tương tự như văn bản rộng hơn cửa sổ trình duyệt (cuộn qua lại để đọc = sucks). Cũng xem xéttext-align: justify;