Ακολουθεί ένα παράδειγμα μιας απλής κατηγορίας τριών στηλών:
.three-col ( -moz-column-count: 3; -moz-column-gap: 20px; -webkit-column-count: 3; -webkit-column-gap: 20px; )Εκ των οποίων θα εφαρμόζατε σε ένα τμήμα κειμένου όπως:
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
Παράδειγμα
Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, temp sit sitet, 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 στην ευκολία turpis pulvinar. Γιορ Φλέις. Praesent dapibus, neque id cursus faucibus, tortor neque egestas augue, eu vulputate magna eros eu erat. Aliquam erat volutpat. Nam dui mi, tincidunt quis, accsan porttitor, Facilisis luctus, metus
Σημειώστε ότι το ύψος κάθε στήλης είναι αυτόματα ισορροπημένο, σύμφωνα με τις προδιαγραφές.
Σημειώστε επίσης ότι αυτό το demo και δείγμα κώδικα χρησιμοποιεί προθέματα προμηθευτών moz και webkit, θα πρέπει να λειτουργεί μόνο σε προγράμματα περιήγησης Gecko (Firefox 1.5+, et al.) Και Webkit (Safari 3+, Chrome, et al.). Δεν υπάρχει εγγενής υποστήριξη στον Internet Explorer ή στην Opera που γνωρίζω.
Όλες οι σχετικές ιδιότητες
.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; )Μπορείτε επίσης να ορίσετε το column-width(με προθέματα), αλλά είναι πιο λογικό να το αφήσετε να το υπολογίσει αυτόματα.
Ο κανόνας ("κανόνας", όπως σε, μια γραμμή) θα διαιρέσει το κενό στη μέση. Μπορείτε να χρησιμοποιήσετε τις ίδιες τιμές όπως θα κάνατε border.
Προσέξτε να μην είναι τα μπλοκ κειμένου σας τόσο πολύ ψηλά ώστε να είναι ψηλότερα από ένα (αρκετά μικρό) παράθυρο του προγράμματος περιήγησης, αλλιώς είναι το ίδιο πρόβλημα με το κείμενο που είναι ευρύτερο από το παράθυρο του προγράμματος περιήγησης (κύλιση εμπρός και πίσω για ανάγνωση = χάλια) Σκεφτείτε επίσηςtext-align: justify;
Εναλλαγή JavaScript
Παρουσιάζεται σε αυτό το άρθρο A List Apart.