Χρησιμοποιώντας το CSS Float Property για να σχεδιάσετε τις σελίδες της ιστοσελίδας
Η ιδιότητα CSS είναι μια πολύ σημαντική ιδιότητα για τη διάταξη. Σας επιτρέπει να τοποθετήσετε τα σχέδια ιστοσελίδας σας ακριβώς όπως θέλετε να εμφανίζονται - αλλά για να τα χρησιμοποιήσετε θα πρέπει να καταλάβετε πώς λειτουργεί.
Σε ένα φύλλο στυλ, η ιδιότητα float CSS μοιάζει με αυτό:
.right {float: right; }}
Αυτό λέει στο πρόγραμμα περιήγησης ότι όλα με την τάξη του "σωστού" θα πρέπει να μεταφερθούν στα δεξιά.
Θα την εκχωρήσατε έτσι:
class = "right" />
Τι μπορείτε να επιπλέξετε με την ιδιότητα float CSS;
Δεν μπορείτε να επιπλεύσετε κάθε στοιχείο σε μια ιστοσελίδα. Μπορείτε να επιπλεύσετε μόνο στοιχεία σε επίπεδο μπλοκ . Αυτά είναι τα στοιχεία που καταλαμβάνουν ένα μπλοκ χώρου στη σελίδα, όπως οι εικόνες (), οι παράγραφοι (), τα τμήματα () και οι λίστες ().
Άλλα στοιχεία που επηρεάζουν το κείμενο, αλλά δεν δημιουργούν ένα πλαίσιο στη σελίδα ονομάζονται στοιχεία γραμμής και δεν μπορούν να μεταφερθούν. Αυτά είναι στοιχεία όπως span (), διαλείμματα γραμμής (), ισχυρή έμφαση (), ή πλάγια στοιχεία ().
Πού φεύγουν;
Μπορείτε να μετακινήσετε στοιχεία προς τα δεξιά ή προς τα αριστερά. Οποιοδήποτε στοιχείο που ακολουθεί το επιπλεκόμενο στοιχείο θα ρέει γύρω από το επιπλωμένο στοιχείο στην άλλη πλευρά.
Για παράδειγμα, εάν μεταφέρω μια εικόνα προς τα αριστερά, οποιοδήποτε κείμενο ή άλλα στοιχεία που ακολουθούν θα ρέουν γύρω της προς τα δεξιά. Και αν πλέω μια εικόνα προς τα δεξιά, οποιοδήποτε κείμενο ή άλλα στοιχεία που ακολουθούν θα ρέουν γύρω από αυτό προς τα αριστερά. Μια εικόνα που τοποθετείται σε ένα μπλοκ κειμένου χωρίς να έχει εφαρμοστεί στυλ επιπλεύσεως θα εμφανίζει το πρόγραμμα περιήγησης που έχει οριστεί για εμφάνιση εικόνων.
Αυτό συμβαίνει συνήθως με την πρώτη γραμμή του παρακάτω κειμένου που εμφανίζεται στο κάτω μέρος της εικόνας.
Πόσο μακριά θα καταλήξουν;
Ένα στοιχείο που έχει επιπλεύσει θα μετακινηθεί όσο πιο μακριά γίνεται αριστερά ή δεξιά του στοιχείου δοχείου. Αυτό έχει ως αποτέλεσμα πολλές διαφορετικές καταστάσεις ανάλογα με τον τρόπο γραφής του κώδικα.
Για αυτά τα παραδείγματα, θα μετατοπίσω ένα μικρό στοιχείο DIV προς τα αριστερά:
- Εάν το επιπλωμένο στοιχείο δεν έχει προκαθορισμένο πλάτος, θα πάρει όσο το δυνατόν περισσότερο οριζόντιο χώρο όπως απαιτείται και είναι διαθέσιμο, ανεξάρτητα από το πλωτήρα. Σημείωση: μερικά προγράμματα περιήγησης προσπαθούν να τοποθετήσουν στοιχεία δίπλα σε επιπλεγμένα στοιχεία όταν το πλάτος δεν έχει καθοριστεί - συνήθως δίνουν στο μη πλωτό στοιχείο μόνο ένα μικρό χώρο. Επομένως, θα πρέπει πάντα να ορίζετε ένα πλάτος σε επιπλεγμένα στοιχεία.
- Εάν το στοιχείο κοντέινερ είναι το στοιχείο HTML, το floated DIV θα κάθεται στο αριστερό περιθώριο της σελίδας.
- Εάν το στοιχείο του δοχείου περιέχει το ίδιο το άλλο, το πλωτό DIV θα καθίσει στο αριστερό περιθώριο του δοχείου.
- Μπορείτε να φωλιάσετε επιπλέουσες στοιχεία, και αυτό μπορεί να έχει ως αποτέλεσμα το πλωτήρα να καταλήγει σε μια εκπληκτική θέση. Για παράδειγμα, αυτό το float είναι ένα αριστερό επίπλευσης DIV μέσα σε ένα σωστό επίπλευσης DIV.
- Τα κυμαινόμενα στοιχεία θα κάθονται το ένα δίπλα στο άλλο εάν υπάρχει χώρος στο δοχείο. Για παράδειγμα, αυτό το δοχείο έχει τρία DIV στοιχεία πλάτους 100px που επιπλέουν σε ένα δοχείο πλάτους 400px.
Μπορείτε ακόμα να χρησιμοποιήσετε πλωτήρες για να δημιουργήσετε μια διάταξη φωτογραφικών διαφανειών. Μπορείτε να βάλετε κάθε μικρογραφία (λειτουργεί καλύτερα όταν έχουν το ίδιο μέγεθος) σε ένα DIV με τη λεζάντα και να επιπλέουν τα στοιχεία DIV στο δοχείο.
Ανεξάρτητα από το μέγεθος του παραθύρου του προγράμματος περιήγησης, οι μικρογραφίες θα ομαδοποιηθούν ομοιόμορφα.
Απενεργοποίηση του πλωτήρα
Μόλις μάθετε πώς να πάρετε ένα στοιχείο για να επιπλέει, είναι σημαντικό να γνωρίζετε πώς να απενεργοποιήσετε το πλωτήρα. Απενεργοποιείτε τον πλωτήρα με την ιδιότητα διαγραφής CSS. Μπορείτε να καθαρίσετε τους αριστερούς πλωτήρες, τους σωστούς πλωτήρες ή και τα δύο:
σαφής: αριστερά.
σαφής: δεξιά?
σαφής: και οι δύο?
Οποιοδήποτε στοιχείο που ορίζετε για την καθαρή ιδιότητα για εμφανίζεται κάτω από ένα στοιχείο που επιπλέει προς αυτήν την κατεύθυνση. Για παράδειγμα, σε αυτό το παράδειγμα οι δύο πρώτες παράγραφοι του κειμένου δεν έχουν εκκαθαριστεί, αλλά το τρίτο είναι.
Παίξτε με τη σαφή αξία διαφορετικών στοιχείων στα έγγραφά σας για να έχετε διαφορετικά εφέ διάταξης.
Μια από τις πιο ενδιαφέρουσες διατάξεις επίπλευσης είναι μια σειρά εικόνων κάτω από τη δεξιά ή αριστερή στήλη δίπλα σε παραγράφους του κειμένου. Ακόμη και αν το κείμενο δεν είναι αρκετό για να μετακινηθείτε πέρα από την εικόνα, μπορείτε να χρησιμοποιήσετε τη διαγραφή σε όλες τις εικόνες για να βεβαιωθείτε ότι εμφανίζονται στη στήλη και όχι δίπλα στην προηγούμενη εικόνα.
Το HTML (επαναλάβετε αυτήν την παράγραφο):
Ο Duis aute irure dolor sed do eiusmod temporal incididunt για την αντιπαράθεση στο voluptate. Ο μη κυβερνητικός εκπρόσωπος, εκτός από τον εργαζόμενο και τον πάροχο της άλλης.
Το CSS (για να επιπλεύσετε τις εικόνες στα αριστερά):
img.float {float: αριστερά;
σαφής: αριστερά.
περιθώριο: 5px;
}}
Και προς τα δεξιά:
img.float {float: right;
σαφής: δεξιά?
περιθώριο: 5px;
}}
Χρησιμοποιώντας πλωτήρες για διάταξη
Αφού καταλάβετε πώς λειτουργεί η ιδιότητα float, μπορείτε να την χρησιμοποιήσετε για να σχεδιάσετε τις ιστοσελίδες σας. Αυτά είναι τα βήματα που έχω για να δημιουργήσω μια επιπλέουσα ιστοσελίδα:
- Σχεδιάστε τη διάταξη (σε χαρτί ή σε γραφικό εργαλείο ή στο κεφάλι μου).
- Καθορίστε πού πρόκειται να γίνουν οι διαχωρισμοί σελίδων.
- Προσδιορίστε τα πλάτη των διαφόρων δοχείων και των στοιχείων μέσα σε αυτά.
- Φτάστε τα πάντα. Ακόμη και το εξώτατο στοιχείο δοχείου μεταφέρεται προς τα αριστερά, ώστε να γνωρίζω πού θα είναι σε σχέση με τη θύρα προβολής του προγράμματος περιήγησης.
Εφόσον γνωρίζετε τα πλάτη (τα ποσοστά είναι καλά) των διατομών σας, μπορείτε να χρησιμοποιήσετε την ιδιότητα float για να τα τοποθετήσετε εκεί που ανήκουν στη σελίδα. Και το ωραίο πράγμα είναι, δεν χρειάζεται να ανησυχείτε τόσο πολύ για το μοντέλο κουτιού που διαφέρει για τον Internet Explorer ή τον Firefox.