Η ενότητα CSS Multi-column Layout είναι ένα ισχυρό εργαλείο που σας επιτρέπει να δημιουργείτε εύκολα διατάξεις πολλαπλών στηλών για τις ιστοσελίδες σας. Η άνοδος του responsive design σημαίνει ότι είναι σημαντικό να κατανοήσουμε πώς να χρησιμοποιήσετε αυτήν την ενότητα.
Μπορείτε να χρησιμοποιήσετε τις ιδιότητες στηλών για να δημιουργήσετε ευέλικτες και δυναμικές διατάξεις που προσαρμόζονται σε διαφορετικά μεγέθη οθόνης.
Καθορισμός του αριθμού στήλης, του πλάτους και του κενού
Για να δημιουργήσετε μια κατάλληλη διάταξη πολλαπλών στηλών για το περιεχόμενο της σελίδας σας, θα πρέπει να ξεκινήσετε αποφασίζοντας πόσες στήλες θέλετε να εκτείνεται. Μία από τις πιο σημαντικές ιδιότητες στη μονάδα πολλαπλών στηλών είναι η στήλη-αριθμός ιδιότητα, την οποία χρησιμοποιείτε για να ορίσετε τον αριθμό των στηλών στις οποίες θα διαιρέσετε το περιεχόμενο.
Για παράδειγμα:
.δοχείο {
στήλη-αριθμός: 3;
}
Μπορείτε επίσης να καθορίσετε το πλάτος και το κενό των στηλών. Μπορείτε να ορίσετε την τιμή του πλάτους της στήλης χρησιμοποιώντας οποιοδήποτε από τα τις υποστηριζόμενες μονάδες CSS αρέσει px, em, ή %.
Αν πλάτος στήλης Έχει οριστεί αυτο, το πρόγραμμα περιήγησης θα υπολογίσει το πλάτος κάθε στήλης με βάση το στήλη-αριθμός ιδιοκτησία και τον διαθέσιμο χώρο μέσα στη διάταξή σας.
Για παράδειγμα, αυτό το CSS δηλώνει 3 στήλες, καθεμία με πλάτος 200 pixels:
.δοχείο {
στήλη-αριθμός: 3;
πλάτος στήλης: 200px;
}
ο στήλη-κενό Η ιδιότητα καθορίζει το κενό ή το διάστημα μεταξύ των στηλών σε μια διάταξη πολλών στηλών. Θα ορίσει το μέγεθος των κενών κενών διαστημάτων μεταξύ γειτονικών στηλών και μπορεί να λάβει μια τιμή μήκους σε pixel, ems ή οποιεσδήποτε άλλες υποστηριζόμενες μονάδες.
Για παράδειγμα:
.δοχείο {
στήλη-αριθμός: 3;
στήλη-κενό: 20px; /* ορίζει το κενό μεταξύ των στηλών σε 20 pixel */
}
Από προεπιλογή, η τιμή του στήλη-κενό Έχει οριστεί κανονικός. Το πρόγραμμα περιήγησής σας επιλέγει αυτήν την τιμή για να επιτύχει σταθερή απόσταση μεταξύ των στηλών στη διάταξή σας, ενώ παραμένει οπτικά ευχάριστη. Αυτή η τιμή μπορεί επίσης να διαφέρει μεταξύ των προγραμμάτων περιήγησης και μπορεί επίσης να εξαρτάται από το μέγεθος της γραμματοσειράς, το ύψος της γραμμής, ιδιότητα θέσης, και άλλες ιδιότητες διάταξης του περιεχομένου των στηλών.
Εξασφάλιση ισορροπίας στηλών
Οι στήλες CSS προσπαθούν να γεμίσουν όλο τον διαθέσιμο χώρο μέσα σε μια διάταξη. Αυτό μπορεί μερικές φορές να οδηγήσει σε στήλες που έχουν σημαντικά διαφορετικά ύψη, κάνοντας τη διάταξη να φαίνεται ανομοιόμορφη.
Για να εξισορροπήσετε στήλες, θα πρέπει να βεβαιωθείτε ότι κάθε στήλη στη διάταξή σας έχει περίπου την ίδια ποσότητα περιεχομένου.
Μπορείτε να το πετύχετε ρυθμίζοντας το CSS γέμισμα στήλης ιδιοκτησία σε ισορροπία. Στη συνέχεια, ένα πρόγραμμα περιήγησης θα προσπαθήσει να κατανείμει το περιεχόμενο ομοιόμορφα σε όλες τις στήλες, έτσι ώστε να έχουν περίπου το ίδιο ύψος.
ο γέμισμα στήλης ιδιοκτησία έχει οριστεί σε ισορροπία από προεπιλογή, αλλά μια τιμή του αυτο θα αλλάξει αυτή τη συμπεριφορά. Η χρήση αυτόματης διανομής του περιεχομένου σε στήλες με βάση τον διαθέσιμο χώρο. Αυτό μπορεί να οδηγήσει σε άνιση απόσταση μεταξύ στηλών και ανομοιόμορφα ύψη στηλών. Μπορεί ακόμη και να δημιουργήσει μια διάταξη με κενές στήλες.
Ακολουθεί ένα παράδειγμα του τρόπου χρήσης του γέμισμα στήλης ιδιότητα για εξισορρόπηση στηλών σε διάταξη πολλών στηλών:
.διάταξη πολλών στηλών {
στήλη-αριθμός: 3;
στήλη-κενό: 20px;
γέμισμα στήλης: ισορροπία;
}
Σε αυτό το παράδειγμα, έχουμε μια διάταξη πολλών στηλών με τρεις στήλες και ένα κενό 20 pixel μεταξύ κάθε στήλης. Ρυθμίζοντας το γέμισμα στήλης ιδιοκτησία σε ισορροπία, διασφαλίζουμε ότι το περιεχόμενο κατανέμεται ομοιόμορφα στις στήλες, με αποτέλεσμα να έχουμε ισορροπημένα ύψη στηλών.
Είναι σημαντικό να σημειωθεί ότι το γέμισμα στήλης Η ιδιότητα μπορεί να μην λειτουργεί καλά για όλες τις διατάξεις και μπορεί να οδηγήσει σε άνιση απόσταση μεταξύ των στηλών. Σε τέτοιες περιπτώσεις, ίσως χρειαστεί να χρησιμοποιήσετε JavaScript για να εξισορροπήσετε μη αυτόματα τις στήλες. Θυμηθείτε να ακολουθείτε τις βέλτιστες πρακτικές και χρησιμοποιήστε προοδευτική βελτίωση ώστε να μην βασίζεστε σε JavaScript.
Βάζοντας τα όλα μαζί
Μπορείτε να συγκεντρώσετε όλα όσα έχετε μάθει σχετικά με την υλοποίηση μιας διάταξης με στήλες CSS και να τα χρησιμοποιήσετε για να δημιουργήσετε μια διάταξη σε στυλ περιοδικού.
Πρώτα, δημιουργήστε τη βασική δομή HTML. Χρησιμοποιήστε ένα στοιχείο κοντέινερ για να αναδιπλώσετε το περιεχόμενό σας και, στη συνέχεια, δημιουργήστε πολλά θυγατρικά στοιχεία τα οποία μπορείτε στη συνέχεια να τα διαμορφώσετε σε στήλες.
html>
<html>
<κεφάλι>
<Σύνδεσμοςσχετ="φύλλο στυλ"href="CSScolumns.css" />
κεφάλι>
<σώμα>
Στοιχείο κοντέινερ
<divτάξη="διάταξη περιοδικού">Παιδικά Στοιχεία
<divτάξη="άρθρο">
<h2>Τίτλος άρθρουh2><Π>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.Π>
div><divτάξη="άρθρο">
<h2>Τίτλος άρθρουh2><Π>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.Π>
div><divτάξη="άρθρο">
<h2>Τίτλος άρθρουh2><Π>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed in
magna vel lorem pharetra bibendum.Π>
div>
div>
σώμα>
html>
Για να δημιουργήσετε μια διάταξη σε στυλ περιοδικού χρησιμοποιώντας τη λειτουργική μονάδα πολλαπλών στηλών CSS, συνδυάστε το στήλη-αριθμός, πλάτος στήλης, στήλη-κενό, και γέμισμα στήλης ιδιότητες:
.περιοδικό-διάταξη {
στήλη-αριθμός: 3;
πλάτος στήλης: 300px;
στήλη-κενό: 20px;
γέμισμα στήλης: ισορροπία;
}
.άρθρο {
χρώμα του φόντου: #f8f8f8;
σύνορα-ακτίνα: 4px;
κουτί-σκιά: 0 2px 4pxrgba(0, 0, 0, 0.1);
υλικό παραγεμίσματος: 10px;
σπάσει μέσα: αποφυγή-στήλη;
}
Αυτό το παράδειγμα ορίζει επίσης το σπάσει μέσα ιδιοκτησία στο .άρθρο κατηγορίας, με αξία αποφυγή-στήλη. Η ιδιότητα διασφαλίζει ότι κάθε άρθρο παραμένει σε μία στήλη, αντί να χωρίζεται σε πολλές στήλες. Δείτε πώς πρέπει να μοιάζει η διάταξη:
Χρήση εναλλακτικών για μη υποστηριζόμενα προγράμματα περιήγησης
Είναι σημαντικό να σημειωθεί ότι η στήλη-αριθμός Η ιδιότητα δεν υποστηρίζεται σε όλα τα προγράμματα περιήγησης. Προγράμματα περιήγησης που δεν υποστηρίζουν στήλη-αριθμός, θα εμφανίσει το περιεχόμενο σε μία στήλη.
Για να παρέχετε εναλλακτικά στυλ για προγράμματα περιήγησης που δεν υποστηρίζονται, μπορείτε να χρησιμοποιήσετε ερωτήματα λειτουργιών όπως @υποστηρίζει για την ανίχνευση υποστήριξης για το στήλη-αριθμός ιδιοκτησία και παρέχετε εναλλακτικά στυλ όταν η ιδιότητα δεν υποστηρίζεται.
Για παράδειγμα:
.δοχείο {
/* Εναλλακτικά για προγράμματα περιήγησης που δεν υποστηρίζουν μέτρηση στηλών */
πλάτος: 100%;
}
/* Εντοπισμός υποστήριξης για τον αριθμό στηλών */
@υποστηρίζει (πλήθος στηλών:3) {
.δοχείο {
στήλη-αριθμός: 3;
}
}
Σε αυτό το παράδειγμα, χρησιμοποιούμε το @υποστηρίζει ερώτημα δυνατότητας για ανίχνευση υποστήριξης για το στήλη-αριθμός ιδιοκτησία. Εάν το πρόγραμμα περιήγησης υποστηρίζει τον αριθμό στηλών, το δοχείο το στοιχείο θα εμφανίζεται σε τρεις στήλες. Εάν το πρόγραμμα περιήγησης δεν υποστηρίζει μέτρηση στηλών, θα εμφανίσει το περιεχόμενο σε μία στήλη χρησιμοποιώντας το πλάτος ιδιοκτησία.
Σπάζοντας το περιεχόμενο σε στήλες
Συνολικά, οι στήλες CSS παρέχουν έναν πρακτικό και ισχυρό τρόπο δημιουργίας ευέλικτων και αποκρινόμενων διατάξεων πολλών στηλών που βελτιώνουν τη χρηστικότητα και την εμπειρία χρήστη του περιεχομένου ιστού.
Χρησιμοποιώντας στήλες CSS και JavaScript μαζί, μπορείτε να δημιουργήσετε ακόμα πιο εξελιγμένες και δυναμικές διατάξεις που προσαρμόζονται σε διαφορετικές προτιμήσεις χρηστών και μεγέθη συσκευών, κάνοντας το περιεχόμενό σας στον ιστό πιο προσιτό και ελκυστικό για τους χρήστες σας.
