Αυτό το άρθρο δείχνει τη σωστή στοίχιση ενός div με πρακτικά παραδείγματα χρησιμοποιώντας CSS.
- Πώς να ευθυγραμμίσετε δεξιά ένα Div χρησιμοποιώντας CSS;
- Χρήση της ιδιότητας «float».
- Χρήση της «σωστής» ιδιότητας
- Χρήση Flex Layout
- Χρήση διάταξης πλέγματος
Πώς να ευθυγραμμίσετε δεξιά ένα Div χρησιμοποιώντας CSS;
Ο προγραμματιστής μπορεί να ευθυγραμμίσει σωστά κάθε στοιχείο div ή εικόνα με τρόπο που να κάνει τον ιστότοπο πιο ελκυστικό. Λόγω της υψηλής ευελιξίας τους, τα στοιχεία div μπορούν να χρησιμοποιηθούν με διάφορους τρόπους στην ιστοσελίδα, όπως ο καθορισμός τμημάτων σελίδας, η δημιουργία στηλών και η αναδίπλωση συνόλων σχετικού περιεχομένου.
Ακολουθήστε τις παρακάτω μεθόδους για να ευθυγραμμίσετε δεξιά το div:
Μέθοδος 1: Χρήση της ιδιότητας «float».
Στο αρχείο HTML, δημιουργήστε ένα div και αντιστοιχίστε του μια κλάση ' στοίχιση προς τα δεξιά '. Αυτή η κλάση και το div χρησιμοποιούνται σε αυτό το άρθρο.
< div τάξη = 'στοίχιση προς τα δεξιά' >
< Π > Αυτό είναι κάποιο περιεχόμενο. < / Π >
< / div >
Τώρα, επιλέξτε αυτήν την κλάση div ' στοίχιση προς τα δεξιά ” και εκχωρήστε τις ιδιότητες CSS. Αυτές οι ιδιότητες χρησιμοποιούνται για καλύτερη οπτικοποίηση:
.στοίχιση προς τα δεξιά {
float: δεξιά;
padding: 10px;
Ιστορικό- χρώμα : καυτό ροζ;
}
Στον παραπάνω κώδικα, το « φλοτέρ Η ιδιοκτησία έχει οριστεί στα δεξιά. Επιπλέει ή μετακινεί το div στη σωστή κατεύθυνση στην ιστοσελίδα. Οι ιδιότητες συμπλήρωσης και χρώματος φόντου έχουν οριστεί σε ' 10 εικονοστοιχεία ' και ' καυτό ροζ ” αντίστοιχα.
Μετά τη μεταγλώττιση του παραπάνω αποσπάσματος κώδικα, η ιστοσελίδα μοιάζει με αυτό:
Η παραπάνω έξοδος επιβεβαιώνει ότι το div κινείται προς τη σωστή κατεύθυνση.
Μέθοδος 2: Χρήση της «σωστής» ιδιότητας
Στο CSS, επιλέξτε την κλάση div και ορίστε το ' σωστά ιδιότητα σε 0. Εξασφαλίζει ότι η απόσταση του επιλεγμένου div από τη δεξιά πλευρά είναι ίση με μηδέν. Στη συνέχεια, ορίστε το ' θέση ' ιδιοκτησία σε ' απόλυτος ” για να διορθώσετε τη θέση div. Στο τέλος, εφαρμόστε μερικές ιδιότητες στυλ για καλύτερη οπτικοποίηση:
.στοίχιση προς τα δεξιά{
σωστά: 0 ;
θέση: απόλυτη;
padding: 10px;
Ιστορικό- χρώμα : μεσαίο μωβ;
}
Μετά την εκτέλεση, η ιστοσελίδα του κώδικα μοιάζει με αυτό:
Η έξοδος δείχνει ότι το div είναι πλέον ευθυγραμμισμένο δεξιά.
Μέθοδος 3: Χρήση Flex Layout
Το Flex είναι η πιο αποτελεσματική μέθοδος και διατηρεί τη διάταξη κατά την αλλαγή μεγέθους του παραθύρου. Το div μπορεί να ευθυγραμμιστεί δεξιά χρησιμοποιώντας CSS ' Flex Layout ' ιδιότητες. Η διάταξη Flex περιέχει πολλές ιδιότητες για διαφορετικούς σκοπούς.
Στο αρχείο HTML δημιουργήστε ένα γονικό div και μέσα σε αυτό δημιουργεί δύο αδερφικά div. Επίσης, αντιστοιχίστε σε κάθε div μια μοναδική κλάση:
< div τάξη = 'στοίχιση προς τα δεξιά' >< div τάξη = 'αριστερά στοίχιση' >
< Π > Αυτά είναι μερικά ακόμα περιεχόμενο .< / Π >
< / div >
< div τάξη = 'δεξιά στοίχιση' >
< h1 >Γεια από το Linuxhint < / h1 >
< / div >
< / div >
Τώρα μέσα στο « <στυλ> Προσθέστε τις ακόλουθες ιδιότητες CSS:
.στοίχιση προς τα δεξιά {οθόνη: flex;
δικαιολογώ- περιεχόμενο : διάστημα μεταξύ;
}
.δεξιά στοίχιση {
align-self: flex-end;
padding: 10px;
Ιστορικό- χρώμα : μεσαίο μωβ;
}
Στον παραπάνω κώδικα,
- Εκχώρηση ' καλώδιο ' και 'space-ween' τιμές στο ' απεικόνιση ' και ' δικαιολογώ-περιεχόμενο ” ιδιότητες, αντίστοιχα. Αυτές οι ιδιότητες κάνουν το div ευέλικτο και βάζουν ίσες αποστάσεις μεταξύ των θυγατρικών div.
- Ο ' ευθυγραμμίζομαι 'η ιδιοκτησία έχει οριστεί σε ' flex-end ”, με αποτέλεσμα να ευθυγραμμιστεί στη δεξιά πλευρά του δοχείου.
Μετά την εκτέλεση του παραπάνω κώδικα η ιστοσελίδα μοιάζει με αυτό:
Η έξοδος δείχνει ότι το div είναι σωστά ευθυγραμμισμένο χρησιμοποιώντας την ευέλικτη διάταξη.
Μέθοδος 4: Χρήση διάταξης πλέγματος
Η διάταξη πλέγματος μπορεί επίσης να χρησιμοποιηθεί για τη δεξιά στοίχιση του div. Η δομή του κώδικα HTML παραμένει η ίδια:
.στοίχιση προς τα δεξιά {οθόνη: πλέγμα;
πλέγμα-πρότυπο-στήλες: επανάληψη ( 2 , 1φρ ) ;
}
.δεξιά στοίχιση {
πλέγμα-στήλη- αρχή : 2 ;
padding: 10px;
Ιστορικό- χρώμα : γαλαζοπράσινο;
}
Η περιγραφή του κώδικα δίνεται παρακάτω:
- Πρώτα, επιλέξτε τη γονική κλάση div ' .στοίχιση προς τα δεξιά ' και ρυθμίστε το ' απεικόνιση ' ιδιοκτησία σε ' πλέγμα '.
- Στη συνέχεια, δημιουργήστε δύο στήλες με ίσο μέγεθος χρησιμοποιώντας ' πλέγμα-πρότυπο-στήλες ' οριστεί σε ' επανάληψη (2, 1 fr) '.
- Στο τέλος, επιλέξτε την τάξη παιδικού div ' .δεξιά στοίχιση ' και ρυθμίστε το ' πλέγμα-στήλη-έναρξη ” ιδιότητα σε 2. Αυτή η ιδιότητα ξεκινά το στοιχείο από τη δεύτερη στήλη, δηλαδή από τη δεξιά πλευρά.
Μετά την εκτέλεση του παραπάνω κώδικα, η ιστοσελίδα μοιάζει με αυτό:
Η έξοδος δείχνει ότι το div είναι τώρα σωστά ευθυγραμμισμένο χρησιμοποιώντας το ' πλέγμα ” ιδιότητες διάταξης.
συμπέρασμα
Για να ευθυγραμμίσετε το div προς τη σωστή κατεύθυνση, χρησιμοποιήστε το ' φλοτέρ », « σωστά », « ευέλικτη διάταξη ', και ' διάταξη πλέγματος ' ιδιότητες. Ο ' φλοτέρ Το 'η ιδιότητα τίθεται προς τα δεξιά εκχωρώντας την τιμή' 0 εικονοστοιχεία '. Για το ' καλώδιο ιδιότητα ', ρυθμίστε την οθόνη σε flex και χρησιμοποιήστε το ' ευθυγραμμίζομαι ' ιδιοκτησία σε ' flex-end '. Χρησιμοποιώντας την ιδιότητα πλέγμα, δημιουργήστε δύο στήλες ίσου μεγέθους και κάντε το θυγατρικό div να ξεκινά από τη δεύτερη στήλη.