Περιεχόμενο
- Τα ευαίσθητα αντικείμενα στην κορυφή
- Τακτοποιημένα μπλουζάκια
- Οι κάλτσες που γεμίζουν τα κενά
- Καλό ταξίδι
Είναι μεσάνυχτα και αυτό div στον ιστότοπό σας εξακολουθεί να μοιάζει με παιδικό παιχνίδι. Όλα τα στοιχεία είναι χάος και κάθε φορά που παίζετε με CSS απεικόνιση ιδιοκτησία, αναδιατάσσονται σε ένα εντελώς διαφορετικό ανοησία.
Αν είστε σαν εμένα, πιθανότατα θα το λύσετε με το να μουρμουρίζετε και να γίνετε συνεχώς πιο επιθετικοί με το πληκτρολόγιό σας. Και παρόλο που η στρατηγική μου λειτούργησε στο παρελθόν, πρόσφατα ξεκίνησα να βρω έναν καλύτερο τρόπο για να το καταλάβω απεικόνιση ιδιοκτησία.
Αποδεικνύεται τα βασικά του απεικόνιση είναι πολύ απλούστερα απ 'όσο νόμιζα αρχικά. Στην πραγματικότητα, χρησιμοποιούν τις ίδιες αρχές με τη συσκευασία μιας βαλίτσας. Θα καλύψω οθόνη: μπλοκ, ενσωματωμένο μπλοκ και στη γραμμή. Εάν έχετε τακτοποιήσει μια βαλίτσα με κανονικό τρόπο στο παρελθόν, θα δείτε τον παράλληλο. Αν είστε το είδος του ατόμου που κλέβει όλα τα ρούχα σας με τυχαίο τρόπο - λοιπόν, υπάρχουν μόνο τόσα πολλά που μπορώ να κάνω για εσάς.
Η βαλίτσα μας θα περιέχει τρεις τύπους ρούχων:
- Λεπτά, σαν ένα πουκάμισο
- Μπλουζάκια που μπορούν να τυλιχτούν
- Κάλτσες ή εσώρουχα που μπορούν να γεμιστούν σε κενά
Για αναφορά, εάν διαμορφώσαμε τη βαλίτσα σε HTML, θα μοιάζει με αυτό:
div class = 'βαλίτσα'> div class = 'ευαίσθητη'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'socks'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> div class = 'tshirt'> / div> / div>
Τα ευαίσθητα αντικείμενα στην κορυφή
Οθόνη: μπλοκ είναι η προεπιλογή για τα περισσότερα στοιχεία HTML. Αυτό σημαίνει ότι το στοιχείο καταλαμβάνει ολόκληρο τον οριζόντιο χώρο μέσα στο δοχείο του div. Εάν βρίσκεται δίπλα σε άλλα αδέλφια, θα ξεκινήσει μια νέα γραμμή και δεν θα επιτρέψει άλλα στοιχεία στη γραμμή της. Είναι παρόμοιο με τα ευαίσθητα αντικείμενα που βάζετε στο πάνω μέρος της βαλίτσας σας. Αυτά είναι ευαίσθητα ή έξυπνα άρθρα, όπως γιακά πουκάμισα. Δεν θέλετε να τσαλακωθούν, οπότε βεβαιωθείτε ότι δεν σπρώχνονται πάνω σε άλλα ρούχα.
Αυτό αναδεικνύει ένα από τα πιο δύσκολα μέρη του οθόνη: μπλοκ. Παρατηρήστε πώς το κολάρο πουκάμισο δεν καταλαμβάνει ολόκληρο το πλάτος της βαλίτσας; Αυτό δεν σημαίνει ότι άλλα στοιχεία θα ανεβούν στο επίπεδό του. Ας υποθέσουμε ότι αυτό το πουκάμισο έχει το 60 τοις εκατό του πλάτους της βαλίτσας. θα εμπόδιζε ακόμη και άλλα στοιχεία να τα ενώνουν στο ανώτερο επίπεδο.
Γι 'αυτό υπάρχει ένα πορτοκαλί περίγραμμα στην εικόνα. ΕΝΑ οθόνη: μπλοκ Το στοιχείο θα προσθέσει αυτόματα ένα περιθώριο γύρω από αυτό εάν δεν καταλαμβάνει ολόκληρο τον οριζόντιο χώρο.
Τακτοποιημένα μπλουζάκια
Το μεγαλύτερο μέρος της βαλίτσας σας είναι πιθανότατα γεμάτο από τα υπόλοιπα ρούχα σας για το ταξίδι σας. Για λόγους απλότητας, θα το κόψουμε μόνο σε μπλουζάκια. Υπάρχει μια μεγάλη συζήτηση στο Διαδίκτυο σχετικά με το αν το δίπλωμα ή το κύλισμα είναι πιο αποτελεσματικό. Είμαι ένα αναδιπλούμενο είδος ατόμου.
Τέλος πάντων, για να ταιριάζει στα περισσότερα αντικείμενα, ευθυγραμμίζετε τα μπλουζάκια σας δίπλα-δίπλα. Αυτό ακριβώς είναι οθόνη: inline-block προορίζεται για. Αυτά τα στοιχεία μπορούν να κάθονται το ένα δίπλα στο άλλο στην ίδια γραμμή, καθώς και δίπλα οθόνη: inline στοιχεία.
Διαφορετικός οθόνη: inline στοιχεία, ένα ενσωματωμένο μπλοκ Το στοιχείο θα μετακινηθεί στην επόμενη γραμμή εάν δεν ταιριάζει με το που περιέχει div παράλληλα με το άλλο ενσωματωμένο μπλοκ στοιχεία. Για να χυθεί ένα μπλουζάκι στην επόμενη σειρά, θα πρέπει να το κόψετε στη μέση και να χρησιμοποιήσετε το υπόλοιπο μισό για να ξεκινήσετε μια νέα σειρά. Ενσωματωμένο μπλοκ τα στοιχεία δεν επιτρέπεται να χωριστούν στο μισό εάν δεν ταιριάζουν σε μια γραμμή.
Οι κάλτσες που γεμίζουν τα κενά
Ελέγξτε ξανά το αρχικό HTML και θα σημειώσετε ότι υπάρχει μία κάλτσα div> μεταξύ των οκτώ μπλουζών. Αλλά ρίξτε μια ματιά στην οριζόντια προβολή της βαλίτσας στα δεξιά. Εάν υπάρχει μία κάλτσα div>, πώς μπορεί να τερματίσει τη μεσαία σειρά και να ξεκινήσει την κάτω σειρά; Αυτός είναι ο σκοπός του οθόνη: inline!
Ενα στη γραμμή Το στοιχείο θα διαρρεύσει στην επόμενη γραμμή εάν υπερβεί το πλάτος του div (με αυτόν τον τρόπο είναι διαφορετικό από ενσωματωμένο μπλοκ ή ΟΙΚΟΔΟΜΙΚΟ ΤΕΤΡΑΓΩΝΟ). Από τις κάλτσες μας div είναι γεμάτη κάλτσες που είναι τυχαία γεμισμένες σε κενά, μπορεί εύκολα να αρχίσει να γεμίζει το κενό στη δεξιά πλευρά της μεσαίας σειράς και να χυθεί για να ξεκινήσει η κάτω σειρά.
Δεν θα χρειαστεί να κόψετε τις κάλτσες στη μέση για να συμβεί αυτό. Γι 'αυτό μπορούν να γίνουν στη γραμμή, ενώ τα μπλουζάκια μπορούν να είναι μόνο ενσωματωμένο μπλοκ. Εάν τα μπλουζάκια στη μεσαία σειρά καταλάμβαναν μόνο το 60 τοις εκατό του πλάτους, οι κάλτσες div> θα ανέβαινε προς τα πάνω για να γεμίσει ολόκληρο το χώρο στην υπόλοιπη σειρά.
Καλό ταξίδι
Αυτό είναι το τελικό CSS για τη βαλίτσα μας:
.delicate {display: block; πλάτος: 60%; } .tshirt {display: inline-block; πλάτος: 20%; }. κάλτσες {display: inline; }
Εδώ είναι μερικά εναλλακτικά σενάρια για να απεικονιστούν οι διαφορετικές χρήσεις της οθόνης. Αν οι λιχουδιές στην κορυφή είχαν οθόνη: inline-block, ταιριάζουν ακριβώς δίπλα στα μπλουζάκια. Μερικά από τα μπλουζάκια θα ανέβαιναν στην κορυφή και τα υπόλοιπα θα προσαρμόζονταν ανάλογα. Δεν θα υπήρχε άνετο buffer στα αριστερά και στα δεξιά του πουκάμισου.
Αν κάθε μπλουζάκι είχε μπλοκ οθόνης, θα έχετε μια τεράστια στοίβα μπλουζών το ένα πάνω στο άλλο, ένα ανά γραμμή. Αν οι κάλτσες είχαν οθόνη: inline-block, όλοι θα κάθονταν στην κάτω σειρά αντί να ρέουν μεταξύ των δύο σειρών. Μερικά μπλουζάκια θα σπρώχνονταν σε άλλη σειρά, σχηματίζοντας μια τέταρτη γραμμή. Θα υπήρχε ένα κενό στα δεξιά της μεσαίας σειράς μπλουζών.
Με τη μέθοδο που περιγράφω εδώ, καταλήγουμε με μια τακτοποιημένη βαλίτσα που κάνει καλύτερη χρήση του διαθέσιμου χώρου.
Αυτό το άρθρο δημοσιεύτηκε αρχικά στο καθαρό περιοδικό τεύχος 289 · αγοράστε το εδώ!
