CSS πολλαπλών στηλών με περισσότερες λεπτομέρειες. Στήλες ίσου ύψους χρησιμοποιώντας εικόνα φόντου
Στο σημερινό άρθρο θέλω να μιλήσω για έναν νέο τρόπο δημιουργίας στηλών ίδιο ύψοςΜε χρησιμοποιώντας CSS. Δεν χρειάζεται άλλο Javascript για να γίνουν τα ύψη στηλών ίδια για όλους. Η ουσία αυτής της μεθόδου είναι να χρησιμοποιήσουμε μια νέα ιδιότητα CSS3 που μας δίνει πολύ περισσότερες επιλογές από τη δημιουργία απλώς στηλών του ίδιου ύψους. Αλλά σε αυτό το μάθημα θα εξετάσουμε πόσο εύκολα μπορείτε να λύσετε αυτό το οδυνηρό πρόβλημα.
Διάταξη σελίδας
Μέρος HTML
Ας ορίσουμε δύο στήλες, τις οποίες αργότερα θα κάνουμε ίσες σε ύψος χρησιμοποιώντας CSS:
| 1 2 3 4 5 6 7 8 | id = "σελίδα" > <div id = "κύριος" > </div> |
Δηλαδή, πρέπει να κάνουμε το μπλοκ Ας ορίσουμε ένα flexbox για το κύριο κοντέινερ, το οποίο περιέχει δύο μπλοκ: Εξαιρετική! Τώρα απομένει να ορίσετε το πλάτος για το κεντρικό μπλοκ με το κύριο περιεχόμενο και για την πλαϊνή γραμμή: Επεξηγήσεις: Η σελίδα μας είναι κοντά στην ολοκλήρωση. Όταν όμως το μπλοκ με το κύριο περιεχόμενο στενεύει, η σελίδα γίνεται πολύ μεγάλη. Επομένως, σε ένα συγκεκριμένο πλάτος οθόνης, μπορούμε να κάνουμε την πλαϊνή γραμμή να περάσει κάτω από το μπλοκ με το κύριο περιεχόμενο και να την προβάλετε εύκολα σε κινητές συσκευές: Εδώ είναι ο κωδικός χωρίς προθέματα για να μην πιάνει πολύ χώρο και να μην φαίνεται δυσκίνητος. Μπορείτε να έχετε ένα πλήρως λειτουργικό παράδειγμα χρησιμοποιώντας το κουμπί στην αρχή του άρθρου. Πρέπει επίσης να ειπωθεί για το πού λειτουργεί αυτή η μέθοδος. Δεδομένου ότι αυτή η ιδιότητα είναι αρκετά νέα, λειτουργεί σε σύγχρονα προγράμματα περιήγησης Firefox, Chrome, Safari, Opera και IE 11. Σε αυτό το άρθρο, μάθατε πώς να κάνετε στήλες στο ίδιο ύψος χρησιμοποιώντας CSS. Αλλά αυτό δεν είναι όλες οι δυνατότητες αυτής της ιδιότητας CSS. Η ιδιότητα flex σάς επιτρέπει να κάνετε τα μπλοκ ελαστικά, να τακτοποιείτε αυτόματα στοιχεία σε πολλές στήλες ή σειρές, καταλαμβάνοντας ολόκληρη την ελεύθερη περιοχή και πολλά άλλα. Αλλά συζητήσαμε την πιο βασική και, το πιο σημαντικό, συχνά χρησιμοποιούμενη λύση για τη διάταξη σελίδας σε αυτό το άρθρο. Σε αυτό το σεμινάριο θα μιλήσουμε για τη χρήση ιδιοτήτων CSS3 για την κατασκευή ενός προτύπου πολλών στηλών. Εφόσον πρόκειται για CSS3, η χρήση των ιδιοτήτων του απαιτεί προσεκτική δοκιμή εκ των προτέρων. Για να δημιουργήσετε πολλές στήλες μπορείτε να χρησιμοποιήσετε τις ιδιότητες: Το πρώτο ορίζει τον ακριβή αριθμό των στηλών που θα εξάγονται και το τελευταίο ορίζει το πλάτος κάθε στήλης. Όλες οι άλλες παράμετροι στηλών θα καθοριστούν από το διαθέσιμο πλάτος. Χρησιμοποιούμε σήμανση HTML: Ο κώδικας CSS θα είναι ως εξής: Div (πλήθος στηλών: 3) ή σαν αυτό: Div (πλάτος στήλης: 15em) /* Μπορείτε επίσης να χρησιμοποιήσετε px */ Μια σύντομη ηχογράφηση είναι επίσης διαθέσιμη: Div (στήλες: 3 20 εκ.) Σε μια σύντομη καταχώρηση, μπορείτε να ορίσετε τόσο τον αριθμό των στηλών όσο και το πλάτος τους. Ωστόσο, στην πράξη, κατά κανόνα, απαιτείται μόνο ένα πράγμα. Ο καθορισμός στηλών με χρήση της ιδιότητας στήλης-αριθμός είναι πιο κατάλληλος για ρευστά πρότυπα, καθώς το πλάτος των στηλών θα προσαρμοστεί καθώς αλλάζει το πλάτος της οθόνης του προγράμματος περιήγησης. Η χρήση των ιδιοτήτων μέτρησης στήλης ή πλάτους στήλης δημιουργεί ένα νέο κοντέινερ μεταξύ του εξωτερικού στοιχείου και του περιεχομένου. Ονομάζεται κοντέινερ στήλης, αν και δεν μπορείτε να αλλάξετε τις ιδιότητές του. Οι στήλες είναι ευθυγραμμισμένες σε μια σειρά. Όλα τα κοντέινερ στηλών στη σειρά θα έχουν το ίδιο ύψος, αν και το περιεχόμενό τους μπορεί να διαφέρει σημαντικά. Εάν κάνετε ένα στοιχείο να επιπλέει σε ένα κοντέινερ στήλης, θα περιοριστεί στο δοχείο στήλης και όχι στο εξωτερικό δοχείο. Η ρύθμιση του πλάτους του στοιχείου στήλης σε % θα λειτουργήσει επίσης - το πλάτος θα υπολογιστεί από το πλάτος του δοχείου στήλης και όχι από το εξωτερικό δοχείο. Υπάρχει μικρός έλεγχος στα ηχεία. Μπορούμε να ορίσουμε την απόσταση μεταξύ των στηλών χρησιμοποιώντας την ιδιότητα στήλη-κενό. Από προεπιλογή, η ιδιότητα στήλη-κενό έχει οριστεί σε 1em. Div (κενό στήλης: 2em) Μπορείτε επίσης να ορίσετε το κατακόρυφο διαχωριστικό χρησιμοποιώντας την ιδιότητα στήλης-κανόνας: Div (στήλη-κανόνας: λεπτό στερεό #cccc) Μια σύντομη εγγραφή μπορεί να αναπαρασταθεί από 3 ιδιότητες που λειτουργούν με τον ίδιο τρόπο όπως κατά τον ορισμό των πλαισίων των στοιχείων: Η απόσταση είναι ίση σε ύψος με το δοχείο της στήλης και το διαχωριστικό τοποθετείται στο κέντρο της απόστασης. Η απόσταση και ο διαχωριστής έχουν το ίδιο ύψος. Εάν μια στήλη δεν έχει περιεχόμενο, το διαχωριστικό μεταξύ αυτής και των παρακείμενων στηλών δεν θα εμφανίζεται. Πιθανότατα δεν θα χρησιμοποιείτε την ιδιότητα στήλης-γέμισμα πολύ συχνά για να καθορίσετε τον τρόπο συμπλήρωσης των στηλών. Αυτός είναι ένας τρόπος για να πείτε στα προγράμματα περιήγησης πόσο περιεχόμενο θα τοποθετήσουν σε κάθε στήλη. Μπορείτε να χρησιμοποιήσετε αυτόματη (προεπιλογή) ή ισορροπία, κάτι που θα αναγκάσει το πρόγραμμα περιήγησης να προσπαθήσει να γεμίσει ομοιόμορφα τις στήλες. Στην πράξη, δεν υπάρχει μεγάλη διαφορά μεταξύ των αποτελεσμάτων της χρήσης αυτών των τιμών. Το span, που ορίζεται χρησιμοποιώντας την ιδιότητα στήλης-span, είναι μια πολύ πιο χρήσιμη ρύθμιση. Επιτρέπει σε ένα στοιχείο HTML να εκτείνεται σε πολλές στήλες. Στην παραπάνω εικόνα, η κεφαλίδα χρησιμοποιεί ακριβώς αυτήν την ιδιότητα. H2 (εύρος στήλης: όλα) Υπάρχουν μόνο δύο πιθανές τιμές - όλα (όλα) ή καμία (τίποτα). Δεν θα μπορείτε να χρησιμοποιήσετε 2 από τις 3 στήλες. Υπάρχουν τρεις παρόμοιες ιδιότητες που μπορούν να χρησιμοποιηθούν για τη διακοπή του περιεχομένου σε μια στήλη γύρω από ένα στοιχείο. Ορισμοί τιμών που χρησιμοποιούνται: Ο σκοπός όλων αυτών των ιδιοτήτων και τιμών είναι να διασφαλιστεί ότι συγκεκριμένο περιεχόμενο ξεκινά σε μια νέα στήλη. Εάν μια εικόνα ή μια συνεχής λέξη υπερβαίνει το πλάτος της στήλης, θα αποκοπεί στη μέση του χώρου όπου τοποθετείται το διαχωριστικό. Είναι δυνατό να περιοριστούν οι στήλες έτσι ώστε ένα στοιχείο να έχει περισσότερες στήλες από ό,τι υπάρχει χώρος για έξοδο: Οι ιδιότητες CSS3 για τη δημιουργία ενός προτύπου πολλών στηλών μπορεί να είναι ένα εξαιρετικό εργαλείο. Αλλά η χρήση τους απαιτεί προσεκτικό έλεγχο υποστήριξης σε διαφορετικά προγράμματα περιήγησης. Με τη βοήθειά τους, μπορείτε να αλλάξετε την εμφάνιση ενός υπάρχοντος έργου χωρίς σημαντικές αλλαγές στη δομή. Αρχικά, ας δούμε μερικούς τρόπους με τους οποίους μπορείτε να δημιουργήσετε στήλες και, στη συνέχεια, θα δούμε μερικά παραδείγματα. Χρήση αιωρούμενων μπλοκ. Σήμερα αυτός είναι ο πιο δημοφιλής τρόπος κατασκευής ηχείων, αν και το Flexbox αρχίζει σιγά σιγά να το αντικαθιστά. Από προεπιλογή, δύο μπλοκ σε μια κανονική ροή δεν μπορούν να βρίσκονται στην ίδια γραμμή, αλλά αυτή η συμπεριφορά μπορεί εύκολα να αλλάξει εκχωρώντας την ιδιότητα float και στα δύο: αριστερά | σωστά. Θα αρχίσουν να πιέζουν την αριστερή ή τη δεξιά άκρη. Προκειμένου το μπλοκ που ακολουθεί να δέχεται αιωρούμενα μπλοκ και να τοποθετηθεί σωστά, πρέπει να ρυθμιστεί σε διαγραφή: και τα δύο. Χρησιμοποιώντας πλωτήρες, κατασκευάζονται πιο συχνά 2 ή 3 στήλες. Η διάταξη ενός ιστότοπου με αιωρούμενα μπλοκ δεν είναι πολύ περίπλοκη, απλά πρέπει να γνωρίζετε μερικές από τις αποχρώσεις της συμπεριφοράς τους. Για παράδειγμα, εάν πρέπει να δημιουργήσετε μια περιοχή για την εμφάνιση άρθρων και στα δεξιά - μια πλαϊνή στήλη με ένα μενού, τότε τα αιωρούμενα μπλοκ μπορούν πολύ εύκολα να εφαρμόσουν μια τέτοια διάταξη. Χρήση πινάκων. Οι πίνακες δημιουργήθηκαν γενικά για να εμφανίζουν μεγάλο αριθμό κελιών και στηλών, επομένως η προσθήκη στηλών σε αυτούς είναι τόσο εύκολη όσο το ξεφλούδισμα των αχλαδιών. Ένας πίνακας μπορεί να έχει τουλάχιστον 20 στήλες. Ολόκληρη η δομή του καθορίζεται σε κώδικα html, επομένως ο κώδικας αποδεικνύεται αρκετά δυσκίνητος. Δεδομένου ότι τα κελιά ενός πίνακα μπορούν να ρυθμιστούν σε οποιοδήποτε μέγεθος, στο παρελθόν σχεδόν όλοι οι ιστότοποι σχεδιάζονταν χρησιμοποιώντας αυτά. Για παράδειγμα, για την υλοποίηση της απλούστερης διάταξης (κεφαλίδα, περιεχόμενο, πλαϊνή γραμμή, υποσέλιδο), δημιουργήθηκαν τρεις σειρές στον πίνακα (η σειρά του πίνακα σχηματίζεται από την ετικέτα tr). Κάθε σειρά περιέχει δύο κελιά, επειδή το περιεχόμενο και η πλαϊνή γραμμή πρέπει να τοποθετηθούν χωριστά το ένα από το άλλο. Και στην κεφαλίδα και το υποσέλιδο, αυτά τα κελιά απλά συνδέθηκαν χρησιμοποιώντας το χαρακτηριστικό colspan στην ετικέτα td, εάν ήταν απαραίτητο. Μπορείτε εύκολα να αφαιρέσετε το πλαίσιο από τα κελιά, γεγονός που επέτρεψε στους προγραμματιστές ιστού να σχεδιάζουν πολύπλοκα πρότυπα πολύ εύκολα. Χρησιμοποιώντας το Flexbox. Πρόκειται για μια σύγχρονη τεχνολογία που άρχισε να διαδίδεται το 2014, αν και υπήρχε πριν από αυτό. Η ουσία του είναι η εξής: δημιουργείται ένα κοινό μπλοκ κοντέινερ, στο οποίο τοποθετούνται άλλα μπλοκ, τα οποία θα πρέπει να γίνουν με τη μορφή στηλών, τότε σε αυτό το κοντέινερ πρέπει να εκχωρηθεί εμφάνιση: flex. Στη συνέχεια, συνήθως ορίζεται η ιδιότητα flex-direction, η οποία καθορίζει την κατεύθυνση του κύριου άξονα κατά μήκος του οποίου θα βρίσκονται τα μπλοκ. Οι τιμές μπορούν να οριστούν σε: γραμμή και στήλη. Η πρώτη τιμή θα κατευθύνει τα μπλοκ οριζόντια από δεξιά προς τα αριστερά, η δεύτερη - κάτω. Μπορείτε επίσης να ρυθμίσετε αντίστροφα: flex-direction: row-reverse. Τα μπλοκ θα βρίσκονται από δεξιά προς τα αριστερά. Υπάρχει επίσης ένα σύνολο ξεχωριστών ιδιοτήτων για τα θυγατρικά μπλοκ ενός εύκαμπτου κοντέινερ. Βασικά, αυτές οι ιδιότητες σάς επιτρέπουν να ορίσετε το μέγεθος του μπλοκ και τη συμπεριφορά του σε σχέση με άλλα στοιχεία. Το πλεονέκτημα του flexbox είναι ότι είναι ένα πολύ πιο ευέλικτο στοιχείο. Εάν με τη διάταξη μπλοκ οι προγραμματιστές ιστού έπρεπε συχνά να υπολογίζουν τα πάντα pixel-pixel, ορίζοντας τις σωστές εσοχές, προσθέτοντας διάφορα κόλπα στον κώδικα έτσι ώστε όλα να μην καταρρέουν, τότε τα flex στοιχεία μπορούν εύκολα να τακτοποιηθούν σε μια στήλη, σε μια σειρά και γενικά απαιτούν πολύ λιγότερους μαθηματικούς υπολογισμούς από την πλευρά του προγραμματιστή. Ωστόσο, ακόμα δεν έχω αγγίξει το πιο σημαντικό θέμα. Το CSS προσφέρει σήμερα τη δυνατότητα διάσπασης κειμένου μέσα σε ένα μπλοκ σώματος χωρίς τη βοήθεια αιωρούμενων πλαισίων, πινάκων ή flexboxes. Δηλαδή, στο html παραμένει ένα κανονικό μπλοκ και το κείμενο χωρίζεται σε στήλες αποκλειστικά χάρη στο css. Έτσι, οι ακόλουθες ιδιότητες ισχύουν για ένα μπλοκ στο οποίο το κείμενο πρέπει να χωριστεί σε πολλές στήλες. Column-count – η ιδιότητα καθορίζει τον αριθμό των στηλών στις οποίες πρέπει να χωριστεί το κείμενο. Συνιστάται να ορίσετε την τιμή από 2 έως 4, ανάλογα με το τι σας αρέσει περισσότερο. Πλάτος στήλης – ορίζει τον αριθμό των χαρακτήρων του κειμένου σε μία στήλη. Τονίζω ότι το πλάτος της στήλης σε αυτή την περίπτωση δεν καθορίζεται από pixel, αλλά από τον αριθμό των χαρακτήρων. Βέλτιστο: 30-50 χαρακτήρες σε μία στήλη. Επίσης, αυτή η ιδιότητα δεν μπορεί να ονομαστεί καθόλου cross-browser, επειδή ορίζετε μόνο τον επιθυμητό αριθμό χαρακτήρων, αλλά μένει να φανεί εάν το πρόγραμμα περιήγησης θα ενεργήσει σύμφωνα με τις επιθυμίες σας. Column-gap – ορίζει το διάστημα μεταξύ των στηλών. Μπορεί να καθοριστεί σε pixel. Στήλη-κανόνας – σχεδιάζει μια γραμμή που χωρίζει τις στήλες. Η σύνταξη της ιδιότητας είναι ακριβώς η ίδια με την ιδιότητα περιγράμματος. Αρχικά καταγράφεται το πάχος της γραμμής, μετά ο τύπος της και μετά το χρώμα της. Επίσης θα ήθελα να αναφέρω ότι όλες αυτές οι ιδιότητες css είναι σχετικά νέες. Για παράδειγμα, ο Internet Explorer τα υποστηρίζει μόνο από την έκδοση δέκα. Πρόκειται για ιδιότητες από το πρότυπο CSS3, επομένως εάν πρόκειται να τις χρησιμοποιήσετε στον ιστότοπό σας, θα πρέπει να φροντίσετε για τη συμβατότητα μεταξύ προγραμμάτων περιήγησης, διαφορετικά δεν θα υπάρχουν στήλες σε παλαιότερες εκδόσεις του Opera και του IE. Πλωτές πλάκες. Η διάταξη ενός ιστότοπου σε δύο στήλες γίνεται τις περισσότερες φορές πολύ απλά χρησιμοποιώντας αιωρούμενα μπλοκ. Στο css αυτό υλοποιείται κάπως έτσι: Float-block1( float: αριστερά ) .float-block2( float: αριστερά ) το μπλοκ που θα πρέπει να είναι κάτω από τα float ( καθαρό: αριστερά | και τα δύο ) Δηλαδή, το κάτω μπλοκ πρέπει να καθορίσει αυτήν την ιδιότητα για να τοποθετηθεί σωστά. Έτσι, τα αιωρούμενα μπλοκ θα γίνουν μία γραμμή εάν έχουν αρκετό πλάτος στο γονικό στοιχείο. Φυσικά, πρέπει επίσης να καθορίσετε το πλάτος, το ύψος και το πλαίσιο των μπλοκ έτσι ώστε να μοιάζει με αυτό το στιγμιότυπο οθόνης: Τώρα ας κάνουμε το διασκεδαστικό κομμάτι. Ας προσθέσουμε πολύ τυχαίο κείμενο στο κύριο μπλοκ και ας προσπαθήσουμε να το εμφανίσουμε εκεί σε τρεις στήλες, όπως σε εφημερίδα ή περιοδικό. Για να το κάνετε αυτό, πρέπει να προσθέσετε τους ακόλουθους κανόνες στον κώδικα αυτού του μπλοκ. Ας παραλείψουμε το μέρος όπου λέω ότι με λένε Rimal και ότι είμαι παθιασμένος με το σχεδιασμό ιστοσελίδων, δηλαδή HTML & CSS. Επίσης, ας παραλείψουμε το μέρος όπου σας λέω ότι είχα ένα όνειρο να δημιουργήσω το τέλειο πρότυπο με 100% προσαρμογή και συμβατότητα μεταξύ προγραμμάτων περιήγησης. Στο Διαδίκτυο, δεν βρήκα μια κανονική εξήγηση για τη δημιουργία μπλοκ ιστότοπων σε στήλη N, υπήρχε πάντα στραβά και άσχημο κώδικα παντού. Στόχος μας είναι να φτιάξουμε έναν ιστότοπο τριών στηλών, τα μπλοκ του οποίου θα είναι: Ας ξεκινήσουμε λοιπόν. Για να φτιάξουμε οριζόντιες 3 στήλες, θα χρησιμοποιήσουμε την ιδιότητα οθόνη: inline-block. Ναι, ναι, το ακίνητο float δεν είναι πλέον τόσο σχετικό, αλλά το χρειαζόμαστε ακόμα. Πριν ορίσουμε τις ιδιότητές τους, ας δημιουργήσουμε 3 μπλοκ, τυλίγοντάς τα σε κλάσεις κύριοςΚαι στη γραμμή:
Αποτέλεσμα: Μέγεθος παραθύρου μεγαλύτερο από 900 px Το μέγεθος του παραθύρου είναι μικρότερο από 900 px Μερικές φορές είναι απαραίτητο ο σχεδιασμός της ιστοσελίδας να μην προσαρμόζεται άμεσα σε συγκεκριμένες διαστάσεις, π.χ. κανένα τμήμα του ιστότοπου δεν εξαφανίστηκε, αλλά διατηρήθηκε όλη η λειτουργικότητα, μόνο με μείωση του μεγέθους τους. Για να τεντώσετε το σχέδιο σε όλο το πλάτος της οθόνης, απλώς αφαιρέστε την ιδιότητα μέγιστο πλάτος: 700 pxστην τάξη κύριος. Για να διασφαλίσουμε ότι η σχεδίαση δεν συρρικνώνεται εντελώς όταν το μέγεθος του παραθύρου είναι μικρό, αλλά προσαρμόζεται, προσθέτουμε το ακόλουθο αίτημα στα στυλ @media: /* Ένα απλό παράδειγμα ερωτήματος @media */ @media (max-width:600px) ( .inline div ( display:block; /* Κάνοντας τα μπλοκ "Block", δηλαδή το ένα κάτω από το άλλο */ width:100% ; / * Ορισμός σε όλο το πλάτος της οθόνης */ ύψος: 100 px; Μπορείτε να δείτε το JS Fiddle με περισσότερες λεπτομέρειες - κάθε αλλαγή στον κώδικα προς το καλύτερο είναι ευπρόσδεκτη. Θα θέλαμε να ευχαριστήσουμε τον συνδρομητή μας για αυτό το υλικό, Σε συνέχεια του θέματός μου Νέο στο CSS3: πολλαπλές στήλες, flexbox, διάταξη πλέγματος, σας προσφέρω μια μετάφραση ενός άρθρου με μια βαθύτερη κατάδυση στην ιδιότητα πολλών στηλών με απλά και ξεκάθαρα παραδείγματα. Οι εφημερίδες και τα περιοδικά έχουν επίσης αποδείξει στην πράξη ότι το κείμενο χωρισμένο σε πολλές στήλες είναι πολύ πιο εύκολο να γίνει αντιληπτό. Στις ιστοσελίδες, μέχρι πρόσφατα, η εμφάνιση περιεχομένου με αυτόν τον τρόπο αποτελούσε πρόβλημα, σε σημείο που ο σχεδιαστής διάταξης χώριζε το κείμενο σε πολλά div αλλά όλα μπορούν να γίνουν πολύ πιο απλά με τη μονάδα πολλαπλών στηλών CSS3. Χωρίζουμε το κείμενο σε δύο στήλες: Άρθρο ( -webkit-column-count:2; -moz-column-count:2; column-count:2; ) Χρήση της ιδιοκτησίας πλάτος στήληςΜπορείτε να ορίσετε τις στήλες στο απαιτούμενο πλάτος: Άρθρο ( -moz-column-width: 150 px; -webkit-column-width: 150px; column-width: 150px; ) Άρθρο ( -webkit-column-gap: 30px; -moz-column-gap: 30px; column-gap: 30px; ) Άρθρο ( -moz-column-rule: 1px διακεκομμένο #cccc; -webkit-column-rule: 1px διακεκομμένο #cccc; στήλη-κανόνας: 1px διακεκομμένο #cccc; ) Άρθρο h1 ( -webkit-column-span: all; column-span:all; )Στήλες ίδιου ύψους
Μέρος CSS
συμπέρασμα
Χρήση πολλαπλών στηλών
Δοχεία στήλης
Διαχωριστές διαστημάτων και στηλών
Επένδυση στήλης και άνοιγμα
Διακοπή ηχείου
συμπέρασμα
Πώς να φτιάξετε ηχεία
Διαίρεση κειμένου σε στήλες
Παραδείγματα
Δημιουργία περιεχομένου πολλών στηλών
Χρήση ετικέτας HTML5 άρθρο:
Διάστιχο στηλών
Το διάστημα καθορίζεται από την ιδιοκτησία στήλη-κενόσε px ή em και δεν μπορεί να είναι αρνητικό: 
Διαχωριστής στηλών
Ιδιοκτησία στήλη-κανόναςσας επιτρέπει να προσθέσετε ένα διαχωριστικό μεταξύ στηλών, η αρχή λειτουργίας είναι παρόμοια με σύνορο.
Συγχώνευση στηλών
Ιδιοκτησία κολώνα-άνοιγμαλειτουργεί παρόμοια με colspan V τραπέζι, συνδυάζοντας τις απαιτούμενες στήλες. 
Συμπέρασμα
Χάρη στη μονάδα πολλαπλών στηλών CSS3, μπορείτε γρήγορα και εύκολα να χωρίσετε κείμενο σε ευανάγνωστες στήλες. Η λίστα των υποστηριζόμενων προγραμμάτων περιήγησης είναι ήδη επαρκής για να δοκιμάσετε τη λειτουργικότητα πολλών στηλών σε έργα εργασίας. Για παλιά προγράμματα περιήγησης, μπορείτε να χρησιμοποιήσετε ένα ειδικό
