Για να κάνετε τις στήλες ξεχωριστές, μπορείτε να προσθέσετε μια κάθετη γραμμή μεταξύ κάθε στήλης. Η γραμμή κάθεται στο κέντρο του κενού της στήλης. Αν έχετε ποτέ στυλ border, τότε είστε έτοιμοι να κάνετε στυλ column-rule.
.container ( -webkit-columns: 2 400px; -moz-columns: 2 400px; columns: 2 400px; -webkit-column-rule: 1px solid black; -moz-column-rule: 1px solid black; column-rule: 1px solid black; )Το ακίνητο είναι συντομογραφία για column-rule-width, column-rule-styleκαι column-rule-color, η οποία είναι το ίδιο μοτίβο όπως borderκαι αποδέχεται τις ίδιες τιμές.
-webkit-column-rule-width: 1px; -moz-column-rule-width: 1px; column-rule-width: 1px; -webkit-column-rule-style: solid; -moz-column-rule-style: solid; column-rule-style: solid; -webkit-column-rule-color: black; -moz-column-rule-color: black; column-rule-color: black;column-rule-widthμπορεί να έχει μήκος όπως 3pxή λέξη-κλειδί όπως thin.
column-rule-styleμπορεί να είναι οποιαδήποτε από τις border-styleαξίες, όπως solid, dottedκαι dashed.
column-rule-color μπορεί να έχει οποιαδήποτε τιμή χρώματος.
Σε αντίθεση column-gap, column-ruleδεν καταλαμβάνει χώρο. Εάν το column-rule-widthπάχος είναι πιο παχύ από column-gapτότε, ο κανόνας θα επεκταθεί κάτω από τις στήλες.
Ο κάθετος κανόνας θα υπάρχει μόνο μεταξύ στηλών που περιέχουν περιεχόμενο.
Υποστήριξη προγράμματος περιήγησης
Υποστήριξη διάταξης πολλαπλών στηλών:
| Χρώμιο | Σαφάρι | Firefox | ΛΥΡΙΚΗ ΣΚΗΝΗ | ΙΕ | Android | iOS |
|---|---|---|---|---|---|---|
| Οποιος | 3+ | 1.5+ | 11.1+ | 10+ | 2.3+ | 6.1+ |
Μην ξεχάσετε τα προθέματά σας!