Πρότυπο:MultiCol

Από Γνωσιακή Βάση Υπηρεσιών και Διαδικασιών του Δημοσίου Τομέα
Μετάβαση σε: πλοήγηση, αναζήτηση


Χρησιμοποιείστε αυτό το πρότυπο για να αρχίσετε μία ενότητα που εκτείνεται σε πολλές στήλες. Για παράδειγμα:

 {{MultiCol}}
 Αυτό το κείμενο εμφανίζεται στην πρώτη στήλη.
 {{ColBreak}}
 Αυτό το κείμενο εμφανίζεται στην δεύτερη στήλη του κειμένου.
 {{ColBreak}}
 Και εδώ είναι το κείμενο που εμφανίζεται στην τρίτη στήλη.
 {{EndMultiCol}}

το οποίο μας δίνει:


Αυτό το κείμενο εμφανίζεται στην πρώτη στήλη.

Αυτό το κείμενο εμφανίζεται στην δεύτερη στήλη του κειμένου.

Και εδώ είναι το κείμενο που εμφανίζεται στην τρίτη στήλη.


Μπορείτε να έχετε όσες στήλες επιθυμείτε. Κάθε στήλη θα έχει το ίδιο πλάτος, διαιρώντας σε ίσα τμήματα τον διαθέσιμο χώρο στην σελίδα. Κάθε στήλη έχει, επίσης, ένα μικρό περιθώριο δεξιά (πλάτους 20px) ώστε το κείμενό της να μην «πέφτει» πάνω στο κείμενο της στήλης στα δεξιά της.

Αυτό το πρότυπο έχει μία προαιρετική παράμετρο: το συνολικό πλάτος όλων των στηλών. Αυτό μπορεί να εκφράζεται σε απόλυτη τιμή (π.χ. 12cm) ή σε ποσοστό του διαθέσιμου πλάτους (π.χ. 50%). Αρχική τιμή της παραμέτρου είναι το 100%.

Για παράδειγμα, για δημιουργήσετε πολλαπλές στήλες σε τμήμα της σελίδας που έχει πλάτος μόνο το 50% του πλάτους της σελίδας, κάντε το ακόλουθο:

 {{MultiCol|50%}}
 Αυτό το κείμενο εμφανίζεται στην πρώτη στήλη.
 {{ColBreak}}
 Αυτό το κείμενο εμφανίζεται στην δεύτερη στήλη του κειμένου.
 {{ColBreak}}
 Και εδώ είναι το κείμενο που εμφανίζεται στην τρίτη στήλη.
 {{EndMultiCol}}

το οποίο μας δίνει:


Αυτό το κείμενο εμφανίζεται στην πρώτη στήλη.

Αυτό το κείμενο εμφανίζεται στην δεύτερη στήλη του κειμένου.

Και εδώ είναι το κείμενο που εμφανίζεται στην τρίτη στήλη.


Αυτή η περιοχή των πολλαπλών στηλών με καθορισμένο πλάτος τοποθετείται πάντα στην αριστερή πλευρά. Για να το αλλάξετε αυτό τοποθετείστε το παραπάνω κώδικα μέσα σε ένα μπλοκ div με την ιδιότητα CSS text-align είτε να έχει την τιμή center ή right, κάπως έτσι:

 <div style="text-align: center">
 {{MultiCol|50%}}
 ...
 {{EndMultiCol}}
 </div>

Σχετικά πρότυπα

Το πρότυπο {{Col-begin}} και όσα σχετίζονται με αυτό, κάνουν κάτι παρόμοιο με το παρόν πρότυπο και τα συγγενικά του, αλλά το πρότυπο MultiCol είναι πιο εύκολο στη χρήση.

Κάθε ένα από τα παρακάτω παραδείγματα παράγει το ίδιο αποτέλεσμα: έναν πίνακα τριών στηλών όπου όλες οι στήλες έχουν ίσο πλάτος.

 {{MultiCol}}
 Column 1
 {{ColBreak}}
 Column 2
 {{ColBreak}}
 Column 3
 {{EndMultiCol}}
 {{Col-begin}}
 {{Col-3}}
 Column 1
 {{Col-3}}
 Column 2
 {{Col-3}}
 Column 3
 {{Col-end}}

Είναι απλούστερο να προσθέσετε περισσότερες στήλες στο παράδειγμα με το {{MultiCol}} παρά σε αυτό με το {{Col-begin}}, γιατί στη δεύτερη περίπτωση κάθε εμφάνιση του {{Col-3}} θα έπρεπε να είχε αλλάξει σε {{Col-4}}.