Στο Tailwind CSS, τα αντικατεστημένα στοιχεία είναι τα στοιχεία των οποίων το περιεχόμενο αντικαθίσταται από έναν εξωτερικό πόρο, όπως εικόνες και βίντεο. Μερικές φορές, οι χρήστες αντιμετωπίζουν μια πρόκληση να τοποθετήσουν ένα αντικατασταθέν στοιχείο μέσα στο κοντέινερ. Αυτό συμβαίνει επειδή αυτά τα στοιχεία μπορούν να υπερχειλίσουν το δοχείο εάν το μέγεθός τους είναι μεγαλύτερο από τον διαθέσιμο χώρο. Το Tailwind CSS παρέχει κατηγορίες βοηθητικών προγραμμάτων για τον έλεγχο του τρόπου με τον οποίο το περιεχόμενο ενός αντικατασταθέντος στοιχείου τοποθετείται και ευθυγραμμίζεται εντός του κοντέινερ.
Αυτό το άρθρο θα επεξηγήσει τη μέθοδο για την τοποθέτηση αντικατασταθέντων στοιχείων μέσα σε ένα κοντέινερ στο Tailwind CSS.
Πώς να τοποθετήσετε τα αντικαταστημένα στοιχεία μέσα σε ένα κοντέινερ στο Tailwind;
Για να τοποθετήσετε αντικατασταθέντα στοιχεία μέσα σε ένα κοντέινερ στο Tailwind, δημιουργήστε ένα πρόγραμμα HTML και χρησιμοποιήστε το ' αντικείμενο-<θέση/πλευρά> ” βοηθητικά προγράμματα με τα επιθυμητά στοιχεία. Απαιτείται να ορίσετε τη συγκεκριμένη πλευρά, δηλαδή αριστερά, δεξιά ή κέντρο στο βοηθητικό πρόγραμμα 'object-
Σύνταξη
< στοιχείο τάξη = 'αντικείμενο-<θέση/πλευρά> ...' > ... στοιχείο >
Παράδειγμα
Σε αυτό το παράδειγμα, θα φτιάξουμε ένα δοχείο και θα χρησιμοποιήσουμε όλα τα ' αντικείμενο-<θέση/πλευρά> ' βοηθητικά προγράμματα με ' ' (εικόνα) στοιχεία για να καθορίσετε τη θέση τους που αντικαταστάθηκε μέσα στο κοντέινερ:
< σώμα >
< div τάξη = 'bg-sky-300 grid grid-rows-3 grid-flow-col m-5 space-y-4 p-4 justify-between' >
< img τάξη = 'object-none object-left-top w-24 h-24 my-4' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img τάξη = 'αντικείμενο-κανένα αντικείμενο-αριστερά w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img τάξη = 'object-none object-left-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img τάξη = 'object-none object-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img τάξη = 'αντικείμενο-κανένα αντικείμενο-κέντρο w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img τάξη = 'object-none object-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img τάξη = 'object-none object-right-top w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img τάξη = 'αντικείμενο-κανένα αντικείμενο-δεξιά w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
< img τάξη = 'object-none object-right-bottom w-24 h-24' src = 'https://cdn.pixabay.com/photo/2015/04/23/22/01/mountains-736886_1280.jpg' >
div >
σώμα >
Εδώ, στο γονικό στοιχείο
- ' bg-sky-300 Η τάξη ” ορίζει το χρώμα φόντου του κοντέινερ σε ουρανό.
- ' πλέγμα Η κλάση ” ενεργοποιεί μια διάταξη πλέγματος.
- ' πλέγμα-γραμμές-3 Η κλάση θέτει τον αριθμό των σειρών στο πλέγμα σε 3.
- ' πλέγμα-ροή-κολ Η κλάση ορίζει τη ροή των στοιχείων πλέγματος σε στήλες.
- ' m-5 Η κλάση προσθέτει 5 μονάδες περιθωρίου γύρω από το δοχείο.
- ' διάστημα-υ-4 Η κλάση προσθέτει ένα κατακόρυφο διάστημα 4 μονάδων μεταξύ των θυγατρικών στοιχείων
μέσα στο κοντέινερ.
- ' σελ-4 Η κλάση προσθέτει 4 μονάδες padding στο περιεχόμενο μέσα στο δοχείο.
- ' δικαιολογώ-μεταξύ Η τάξη ευθυγραμμίζει τα θυγατρικά στοιχεία μέσα στο κοντέινερ και τα κατανέμει ομοιόμορφα.
Στα στοιχεία
:
- ' αντικείμενο-κανένα Η κλάση ” δεν εφαρμόζει καμία θέση στο στοιχείο και εμφανίζει το στοιχείο στην προεπιλεγμένη θέση του στο κοντέινερ.
- ' αντικείμενο-αριστερά-πάνω Η κλάση τοποθετεί το στοιχείο
στην επάνω αριστερή γωνία του κοντέινερ.
- ' αντικείμενο-αριστερά Η κλάση ευθυγραμμίζει το στοιχείο στο αριστερό άκρο του κοντέινερ και το διατηρεί κατακόρυφα στο κέντρο.
- ' αντικείμενο-αριστερά-κάτω Η κλάση τοποθετεί το στοιχείο
στην κάτω αριστερή γωνία του κοντέινερ της.
- ' αντικείμενο-κορυφή ” Η κλάση τοποθετεί το στοιχείο στο επάνω άκρο του δοχείου του και το θέτει οριζόντια στο κέντρο.
- ' αντικείμενο-κέντρο Η κλάση τοποθετεί το στοιχείο στο κέντρο του δοχείου και το διατηρεί οριζόντια και κάθετα κεντραρισμένο.
- ' αντικείμενο-κάτω ” Η κλάση τοποθετεί το στοιχείο στο κάτω άκρο του δοχείου του και το διατηρεί οριζόντια στο κέντρο.
- ' αντικείμενο-δεξιά-πάνω Η κλάση τοποθετεί το στοιχείο
στην επάνω δεξιά γωνία του κοντέινερ.
- ' αντικείμενο-δικαίωμα ” Η κλάση τοποθετεί το στοιχείο στη δεξιά άκρη του περιέκτη του και το διατηρεί κατακόρυφα στο κέντρο.
- ' αντικείμενο-δεξιά-κάτω Η κλάση τοποθετεί το στοιχείο στην κάτω δεξιά γωνία του κοντέινερ του.
Παραγωγή
Στην παραπάνω ιστοσελίδα, μπορεί να παρατηρηθεί ότι όλο το περιεχόμενο του αντικατασταθέντος στοιχείου έχει τοποθετηθεί με επιτυχία.
συμπέρασμα
Για να τοποθετήσετε αντικατεστημένα στοιχεία μέσα σε ένα κοντέινερ στο Tailwind, το ' αντικείμενο-<θέση/πλευρά> Τα βοηθητικά προγράμματα χρησιμοποιούνται με τα επιθυμητά στοιχεία, όπως εικόνες. Οι χρήστες πρέπει να ορίσουν τη συγκεκριμένη θέση ή πλευρά, δηλαδή αριστερά, δεξιά ή στο κέντρο στο βοηθητικό πρόγραμμα 'object-
' για να τοποθετήσουν τα αντικατασταθέντα στοιχεία. Αυτό το άρθρο επεξηγεί τη μέθοδο για την τοποθέτηση αντικατασταθέντων στοιχείων μέσα σε ένα κοντέινερ στο Tailwind CSS.