Διάταξη πολλαπλών στηλών (Περιοδικό-ίδιο) Με το CSS3
Σε γενικές γραμμές, οι άνθρωποι θα χάσουν το κομμάτι όταν διαβάζουν εξαιρετικά μεγάλο περιεχόμενο. Αυτός είναι ο λόγος για τον οποίο, στα έντυπα μέσα όπως τα περιοδικά και οι εφημερίδες, το περιεχόμενο χωρίζεται σε πολλαπλές στήλες για εύκολη ανάγνωση.
Η δημιουργία μιας στήλης στον ιστό είναι μια εντελώς διαφορετική ιστορία. Είναι αρκετά δύσκολο. Στην πραγματικότητα, όχι πολύ καιρό πολύ πριν, μπορεί να χρειαστεί να χωρίσετε το περιεχόμενο χειροκίνητα σε μερικούς divs και το επιπλέουν προς τα δεξιά ή προς τα αριστερά και στη συνέχεια καθορίστε το πλάτος, την επίστρωση, το περιθώριο, τα όρια και τα λοιπά.
Αλλά, τα πράγματα τώρα είναι πολύ απλοποιημένα με το CSS3 Μονάδα Πολλαπλών Στήλων. Όπως υποδηλώνει σαφώς το όνομα, αυτή η ενότητα μας επιτρέπει να διαιρέσουμε το περιεχόμενο στη διάταξη με στήλες που βλέπουμε σε εφημερίδες ή περιοδικά.
Υποστήριξη προγράμματος περιήγησης
Πολλές στήλες υποστηρίζονται αυτήν τη στιγμή σε όλα τα προγράμματα περιήγησης - Firefox 2+, Chrome 4+, Safari 3.1+ και Opera 11.1 - εκτός από τις προβλέψεις του Internet Explorer, αλλά η επόμενη έκδοση, IE10, φαίνεται να έχει αρχίσει να παρέχει υποστήριξη για αυτήν την ενότητα.
Για τα υπόλοιπα προγράμματα περιήγησης, για να λειτουργήσει, ο Firefox εξακολουθεί να χρειάζεται το -moz- ενώ το Chrome και το Safari χρειάζονται το -webkit- πρόθεμα. Η Opera δεν απαιτεί προθέματα, επομένως μπορούμε να χρησιμοποιήσουμε μόνο τις επίσημες ιδιότητες.
Πηγή: Πότε μπορώ να χρησιμοποιήσω τη διάταξη πολλών στηλών CSS3?
Δημιουργία πολλών στηλών
Πριν δημιουργήσουμε τις στήλες, έχουμε ετοιμάσει μερικές παραγράφους κειμένου για την επίδειξη, τυλιγμένες μέσα στο HTML5 ετικέτα, όπως ακολουθεί.
Ο ιστότοπός μας βρίσκεται σε πλήρη κατάσταση, ακολουθώντας τον εισηγητή. Nunc libero magna, venenatis quis aliquet et, rutrum στις Αυγούστου. Donec vel tempor dolor. Donec volutpat fringilla porta. Suspendisse non nulla tortor. Το εμπόριο Quisque είναι μοναδικό, κάθονται μαζί με το παράθυρο justo bibendum non. Ολόκληρο το bibendum convallis sapien, sit amet tincidunt orci placerat in. //και ούτω καθεξής
... και καθορίστε το πλάτος για 600px από το φύλλο στυλ, αυτό είναι.
Τώρα, ας αρχίσουμε να δημιουργούμε τις στήλες.
Στο παρακάτω παράδειγμα, θα διαιρέσουμε το περιεχόμενο δύο στήλες με το μέτρηση στήλης ιδιοκτησία. Αυτή η ιδιότητα θα ενημερώνει το πρόγραμμα περιήγησης για την απόδοση του περιεχομένου σε στήλες με τον καθορισμένο αριθμό και θα επιτρέψει στο πρόγραμμα περιήγησης να αποφασίσει το κατάλληλο πλάτος για κάθε στήλη.
άρθρο -webkit-στήλη-count: 2; -μεριθμός-στήλη-2: Αριθμός στήλης: 2.
Εκτός από τον ορισμό τους από την καταμέτρηση, οι στήλες μπορούν να δημιουργηθούν καθορίζοντας το πλάτος χρησιμοποιώντας το πλάτος στήλης ιδιοκτησίας και αφήνοντας το πρόγραμμα περιήγησης να αποφασίσει πόσες στήλες θα πρέπει να δημιουργηθούν στη θέση τους.
Σε αυτό το παράδειγμα, καθορίζουμε το πλάτος της στήλης για 150px, με αποτέλεσμα το περιεχόμενο να χωριστεί σε τρεις στήλες.
άρθρο -moz-column-width: 150px; -webkit-column-width: 150px; πλάτος στήλης: 150px;
Όπως αναφέρεται στην προδιαγραφή. το πραγματικό πλάτος της στήλης μπορεί να είναι ευρύτερο ή μικρότερο από το καθορισμένο πλάτος της στήλης ανάλογα με το διαθέσιμο χώρο. Επίσης, εάν η τιμή πλάτους δεν έχει καθοριστεί ρητά, το “αυτο” θα θεωρηθεί ως προεπιλογή, πράγμα που θα μπορούσε επίσης να σημαίνει “καμία στήλη”.
Απόσπασμα στήλης
Απόσπασμα στήλης καθορίστε τους χώρους που χωρίζουν κάθε στήλη. Η τιμή του κενού μπορεί να αναφέρεται στο em ή px, αλλά όπως αναφέρεται στην προδιαγραφή η τιμή δεν μπορεί να είναι αρνητική. Στο παρακάτω παράδειγμα καθορίζουμε το κενό για το 30px, έτσι οι χώροι μεταξύ των στηλών φαίνονται λίγο μεγαλύτεροι.
άρθρο -webkit-κενό-στήλη: 30px; - διαφορά-στήλη-κενό: 30px; κενό-στήλη: 30px;
Κανόνας στήλης
Εάν θέλετε να προσθέσετε σύνορα μεταξύ της στήλης, μπορείτε να χρησιμοποιήσετε το κανόνας στήλης ιδιοκτησία, το οποίο λειτουργεί πολύ παρόμοια με το σύνορο ιδιοκτησία. Ας πούμε, αν θέλουμε να βάλουμε ένα διάκενο μεταξύ της στήλης, μπορούμε να γράψουμε.
άρθρο -moz-column-rule: 1px dotted # ccc; -webkit-στήλη-κανόνας: 1px διακεκομμένη # ccc; κανόνας στήλης: 1px διάστικτος #ccc;
Στήλη στήλης
Αυτή η ιδιότητα λειτουργεί αρκετά παρόμοια με το colspan σε τραπέζι ετικέτα. Η κοινή εφαρμογή αυτής της ιδιότητας είναι να καλύψει τον τίτλο του περιεχομένου σε όλες τις στήλες. Ακολουθεί ένα παράδειγμα.
άρθρο h1 -webkit-column-span: all; στήλη-έκταση: όλα?
Στο παραπάνω παράδειγμα ορίσαμε το h1 για να εκτείνεται σε όλες τις στήλες και εάν καθορίζεται το εύρος στήλης, 1 θα ληφθεί ως προεπιλογή. Δυστυχώς, αυτή η ιδιοκτησία, τη στιγμή της γραφής, λειτουργεί μόνο σε Opera και Chrome.
Τελικές λέξεις
Αυτό είναι όλο για τώρα, έχουμε βρει όλα τα βασικά πράγματα για να δημιουργήσουμε πολλαπλές στήλες με το CSS3 και όπως έχουμε ήδη αναφέρει στην αρχή, αυτή η ενότητα λειτουργεί πολύ καλά στα σύγχρονα προγράμματα περιήγησης αλλά δεν λειτουργεί ακόμα στον Internet Explorer.
Τελικά, ελπίζουμε ότι τώρα έχετε αρκετά καλή κατανόηση σχετικά με τον τρόπο δημιουργίας στηλών με το CSS3 και αν έχετε χρόνο για πειράματα, μπορείτε να μοιραστείτε τις μεθόδους και τα αποτελέσματά σας στο παρακάτω πλαίσιο σχολίων. Σας ευχαριστούμε που διαβάσατε αυτή τη θέση και διασκεδάστε.
- Διαδήλωση
- Λήψη πηγής
