Ιδιότητα column-width

Η ιδιότητα column-width ορίζει το πλάτος των στηλών σε κείμενο πολλαπλών στηλών. Ως τιμή της ιδιότητας χρησιμοποιούνται οποιεσδήποτε μονάδες για μεγέθη, εκτός από ποσοστά, ή η λέξη-κλειδί auto (από προεπιλογή). Με τιμή auto το πρόγραμμα περιήγησης επιλέγει αυτόματα το βέλτιστο πλάτος στηλών με βάση την column-count και το column-gap.

Σύνταξη

cssεπιλογέας {
  column-width: τιμή;
}

Παράδειγμα . Καθορισμένο πλάτος

Σε αυτό το παράδειγμα καθορίζεται το πλάτος της στήλης column-width σε 150px, ενώ ο αριθμός τους column-count έχει τιμή auto. Ως αποτέλεσμα το πλάτος των στηλών θα είναι 150px, ο αριθμός τους και το κενό μεταξύ τους θα επιλεγεί αυτόματα από το πρόγραμμα περιήγησης:

html<div id="elem">
  some long text
</div>

css#elem {
  column-count: auto;
  column-width: 150px;
  text-align: justify;
}

Результат:

Παράδειγμα . Τιμή auto

Σε αυτό το παράδειγμα το κείμενο θα χωριστεί σε 3 στήλες (επειδή η column-width έχει τιμή 3), ενώ το πλάτος τους θα υπολογιστεί αυτόματα:

html<div id="elem">
  some long text
</div>

css#elem {
  column-width: auto;
  column-count: 3;
  text-align: justify;
}

Результат:

Δείτε επίσης