Αυτό το άρθρο εξηγεί πώς να δημιουργήσετε μια διάταξη 3 στηλών στο CSS. Οι οδηγίες ισχύουν για CSS3 και παλαιότερα.

Σχεδιάστε τη διάταξή σας

Μπορείτε να σχεδιάσετε τη διάταξή σας σε χαρτί ή σε ένα πρόγραμμα γραφικών. Εάν έχετε ήδη υπόψη σας ένα πλαίσιο καλωδίων ή ακόμη πιο εκτεταμένο σχεδιασμό, απλοποιήστε το στα βασικά κουτιά που αποτελούν τον ιστότοπο. Αυτός ο σχεδιασμός που συνοδεύει αυτό το άρθρο έχει τρεις στήλες στην κύρια περιοχή περιεχομένου, καθώς και μια κεφαλίδα και υποσέλιδο. Αν κοιτάξετε προσεκτικά, μπορείτε να δείτε ότι οι τρεις στήλες δεν έχουν ίσο πλάτος.

Αφού σχεδιάσετε τη διάταξή σας, μπορείτε να αρχίσετε να σκέφτεστε τις διαστάσεις. Αυτό το παράδειγμα σχεδιασμού θα έχει τις ακόλουθες βασικές διαστάσεις:

• Όχι περισσότερο από 900 pixel πλάτος
• 20 px υδρορροή στα αριστερά
• 10 px μεταξύ στηλών και γραμμών
• Στήλες πλάτους 250px, 300px και 300px
• Η επάνω σειρά έχει ύψος 150 εικονοστοιχεία
• Η κάτω σειρά έχει ύψος 100 εικονοστοιχεία

Γράψτε βασικό HTML / CSS και δημιουργήστε ένα στοιχείο κοντέινερ

Δεδομένου ότι αυτή η σελίδα θα είναι έγκυρη HTML έγγραφο, ξεκινήστε με ένα κενό κοντέινερ HTML.

Προσθέστε τα βασικά στυλ CSS στο μηδενίστε τα περιθώρια της σελίδας, τα περιθώρια και τα γεμιστικά. Ενώ υπάρχουν και άλλα τυπικά στυλ CSS για νέα έγγραφα, αυτά τα στυλ είναι το ελάχιστο που χρειάζεστε για να έχετε καθαρή διάταξη. Προσθέστε τα στην κεφαλή του εγγράφου σας.

Για να ξεκινήσετε τη δημιουργία της διάταξης, τοποθετήστε ένα στοιχείο κοντέινερ. Μερικές φορές συμβαίνει ότι μπορείτε να απαλλαγείτε από το κοντέινερ αργότερα, αλλά για τις περισσότερες διατάξεις σταθερού πλάτους, το να έχετε το στοιχείο κοντέινερ διευκολύνει τη διαχείριση σε διαφορετικό Ιστό προγράμματα περιήγησης.

Στυλ στο δοχείο

Το κοντέινερ καθορίζει το πλάτος του περιεχομένου της ιστοσελίδας, καθώς και τυχόν περιθώρια γύρω από το εξωτερικό και την επένδυση στο εσωτερικό. Για αυτό το έγγραφο, το δοχείο έχει πλάτος 870 εικονοστοιχεία με υδρορροή 20 pixel στα αριστερά. Η υδρορροή έχει ρυθμιστεί με στυλ περιθωρίου, αλλά η επένδυση στο δοχείο είναι μηδενισμένη για να αποφευχθεί η ευρεία διάσταση των στοιχείων από το δοχείο.

Εάν αποθηκεύσετε το έγγραφό σας τώρα, θα είναι δύσκολο να δείτε το κοντέινερ, επειδή δεν έχει τίποτα σε αυτό. Εάν προσθέσετε κείμενο placeholder, θα μπορείτε να δείτε το στοιχείο κοντέινερ πιο καθαρά.

Χρησιμοποιήστε μια ετικέτα τίτλου για την κεφαλίδα

Ο τρόπος με τον οποίο αποφασίζετε να μορφοποιήσετε τη γραμμή κεφαλίδας εξαρτάται πολύ από το τι υπάρχει. Εάν η γραμμή κεφαλίδας πρόκειται απλώς να έχει γραφικό λογότυπο και επικεφαλίδα, τότε χρησιμοποιήστε μια ετικέτα επικεφαλίδας (

) έχει πιο νόημα από τη χρήση ενός

. Μπορείτε να ορίσετε τον τίτλο με τον ίδιο τρόπο που διαμορφώνετε ένα div και αποφεύγετε τις ξένες ετικέτες.

Το HTML για τη γραμμή κεφαλίδας πηγαίνει στην κορυφή του κοντέινερ και μοιάζει με αυτό:

Στη συνέχεια, για να ορίσετε τα στυλ σε αυτό, προστέθηκε ένα κόκκινο περίγραμμα στο κάτω μέρος, ώστε να μπορείτε να δείτε πού τελειώνει, τα περιθώρια και η επένδυση ήταν μηδενισμένα, το πλάτος ορίστηκε σε 100% και το ύψος στα 150 εικονοστοιχεία.

Μην ξεχάσετε να επιπλεύσετε αυτό το στοιχείο με το float: αριστερά. ιδιοκτησία. Το κλειδί για τη σύνταξη διατάξεων CSS είναι να επιπλέουν τα πάντα, ακόμη και πράγματα που έχουν το ίδιο πλάτος με το κοντέινερ. Με αυτόν τον τρόπο, γνωρίζετε πάντα πού θα βρίσκονται τα στοιχεία στη σελίδα.

ΕΝΑ Επιλογέας απογόνων CSS εφαρμόζονται στυλ μόνο σε στοιχεία H1 που βρίσκονται μέσα στο στοιχείο #container.

Για να λάβετε τρεις στήλες, ξεκινήστε δημιουργώντας δύο στήλες

Όταν δημιουργείτε μια διάταξη τριών στηλών με CSS, πρέπει να διαιρέσετε τη διάταξή σας σε ομάδες των δύο. Έτσι, για αυτήν τη διάταξη τριών στηλών, η μεσαία και δεξιά στήλη και ομαδοποιήθηκε και τοποθετήθηκε δίπλα στην αριστερή στήλη σε διάταξη δύο στηλών όπου η αριστερή στήλη έχει πλάτος 250 εικονοστοιχεία και η δεξιά στήλη πλάτος 610 εικονοστοιχεία (300 η καθεμία για τις δύο στήλες, συν 10 εικονοστοιχεία για την υδρορροή μεταξύ τους).

Η στήλη στα αριστερά αιωρείται προς τα αριστερά, ενώ η άλλη αιωρείται προς τα δεξιά. Επειδή το συνολικό πλάτος και των δύο στηλών είναι 860 εικονοστοιχεία, υπάρχει υδρορροή 10 εικονοστοιχείων μεταξύ τους.

Προσθέστε δύο στήλες μέσα στην ευρεία δεύτερη στήλη

Για να δημιουργήσετε τις τρεις στήλες, προσθέστε δύο div μέσα στην ευρύτερη δεύτερη στήλη, όπως ακριβώς προσθέσατε 2 div μέσα στη στήλη container στο τελευταίο βήμα.

Δεδομένου ότι αυτά τα δύο κουτιά πλάτους 300 εικονοστοιχείων βρίσκονται μέσα σε κουτί πλάτους 610 εικονοστοιχείων, θα υπάρχει και πάλι μια υδρορροή 10 εικονοστοιχείων μεταξύ τους.

Προσθήκη στο υποσέλιδο

Τώρα που το υπόλοιπο της σελίδας έχει στυλ, μπορείτε να το προσθέσετε στο υποσέλιδο. Χρησιμοποιήστε ένα τελευταίο div με αναγνωριστικό "υποσέλιδου" και προσθέστε περιεχόμενο έτσι ώστε να μπορείτε να το δείτε. Μπορείτε επίσης να προσθέσετε ένα περίγραμμα στην κορυφή, ώστε να γνωρίζετε από πού ξεκινά.

Προσθέστε τα προσωπικά σας στυλ και το περιεχόμενό σας

Τώρα που έχετε ολοκληρώσει τη διάταξη, μπορείτε να αρχίσετε να προσθέτετε τα προσωπικά σας στυλ και περιεχόμενο. Να θυμάστε ότι τα περιγράμματα στην κεφαλίδα και το υποσέλιδο προστέθηκαν για να εμφανιστούν τα τμήματα διάταξης, όχι ειδικά για το σχεδιασμό.