Σε αυτό το άρθρο, θα συζητήσουμε κάθε μία από τις αναφερόμενες προσεγγίσεις μία προς μία και θα δώσουμε ένα κατάλληλο παράδειγμα για κάθε μέθοδο.
Λοιπόν, ας ξεκινήσουμε!
Μέθοδος 1: Τοποθετήστε δύο Divs το ένα δίπλα στο άλλο στο CSS χρησιμοποιώντας πλέγμα
Το CSS ' πλέγμα Η διάταξη επιτρέπει στο χρήστη να τοποθετήσει δύο ή περισσότερα δύο div δίπλα-δίπλα. Βασικά, το πλέγμα είναι μια τιμή της ιδιότητας εμφάνισης που χρησιμοποιείται για τη δημιουργία μιας διάταξης που αποτελείται από γραμμές και στήλες.
Σύνταξη
Η σύνταξη της ιδιότητας εμφάνισης με διάταξη πλέγματος δίνεται παρακάτω:
οθόνη: πλέγμα
Τώρα, ας δούμε ένα παράδειγμα που σχετίζεται με την τοποθέτηση δύο div δίπλα-δίπλα στο CSS χρησιμοποιώντας τη διάταξη πλέγματος.
Παράδειγμα
Εδώ, θα δημιουργήσουμε δύο θυγατρικά div μέσα στο γονικό div, έχοντας τα ονόματα κλάσεων ως ' μητρική εταιρεία », « παιδί ' και ' παιδί ”:
< div τάξη = 'μητρική εταιρεία' >< div τάξη = 'παιδί' >< / div >
< div τάξη = 'παιδί' >< / div >
< / div >
Στη συνέχεια, στην ενότητα CSS, χρησιμοποιήστε ' .μητρική εταιρεία ' για να αποκτήσετε πρόσβαση στο γονικό div και να ορίσετε την τιμή της ιδιότητας εμφάνισης ως ' πλέγμα '. Στη συνέχεια, ορίστε το κλάσμα χρησιμοποιώντας το ' πλέγμα-πρότυπο-στήλες ” ιδιότητα δημιουργίας χώρου για στήλες. Στην περίπτωσή μας, θα ορίσουμε τα κλάσματα ως ' 1φρ ' και ' 1φρ ”, που σημαίνει ότι και οι δύο div έχουν αποκτήσει ίσο χώρο. Επιπλέον, θα ορίσουμε το κενό μεταξύ δύο στηλών χρησιμοποιώντας την ιδιότητα στήλη-κενό και θα ορίσουμε την τιμή του ως ' 25 εικονοστοιχεία '.
CSS:
.μητρική εταιρεία {απεικόνιση : πλέγμα ;
πλέγμα-πρότυπο-στήλες : 1fr 1fr ;
στήλη-κενό : 25 εικονοστοιχεία ;
}
Στο επόμενο βήμα, χρησιμοποιούμε ' .παιδί ' για να αποκτήσετε πρόσβαση και στα δύο παιδικά div και να ορίσετε το ύψος των div ως ' 250 εικονοστοιχεία ' και ορίστε το χρώμα φόντου ως ' rgb(253, 5, 109) ”:
.παιδί {ύψος : 250 εικονοστοιχεία ;
Ιστορικό : rgb ( 253 , 5 , 109 ) ;
}
Αυτό θα δείξει το ακόλουθο αποτέλεσμα:
Ας περάσουμε σε μια άλλη μέθοδο για να τοποθετήσουμε το div δίπλα-δίπλα
Μέθοδος 2: Τοποθετήστε δύο Divs το ένα δίπλα στο άλλο στο CSS χρησιμοποιώντας flex
Ο ' καλώδιο ” είναι η τιμή της ιδιότητας εμφάνισης που επιτρέπει την τοποθέτηση δύο div δίπλα-δίπλα. Αυτή η ιδιότητα χρησιμοποιείται για τον ορισμό ενός ευέλικτου μήκους για το ευέλικτο στοιχείο. Συρρικνώνει ή μεγαλώνει το εύκαμπτο αντικείμενο ώστε να χωράει στο δοχείο του.
Σύνταξη
Η σύνταξη της ιδιότητας εμφάνισης με flex δίνεται παρακάτω:
οθόνη: flex;Ας περάσουμε στο παράδειγμα για να κατανοήσουμε τη δηλωμένη έννοια.
Παράδειγμα
Θα εξετάσουμε το ίδιο αρχείο HTML και θα εφαρμόσουμε ' καλώδιο ” στο μητρικό κοντέινερ. Εδώ, θα ορίσουμε την τιμή της ιδιότητας εμφάνισης ως flex και θα ορίσουμε το κενό μεταξύ των θυγατρικών div ως ' 10 εικονοστοιχεία ”:
.μητρική εταιρεία {απεικόνιση : καλώδιο ;
χάσμα : 10 εικονοστοιχεία ;
}
Μετά από αυτό, ορίστε το πλάτος, το ύψος και το χρώμα φόντου του div ως ' 650 px », « 200 εικονοστοιχεία ', και 'rgb(0, 255, 42) », αντίστοιχα:
.παιδί {πλάτος : 650 px ;
ύψος : 200 εικονοστοιχεία ;
Ιστορικό : rgb ( 0 , 255 , 42 ) ;
}
Το αποτέλεσμα του συγκεκριμένου κώδικα δίνεται παρακάτω:
Μέθοδος 3: Τοποθετήστε δύο Divs το ένα δίπλα στο άλλο στο CSS χρησιμοποιώντας float
Η ιδιότητα float CSS καθορίζει την κατεύθυνση κίνησης ενός στοιχείου. Πιο συγκεκριμένα, αυτή η ιδιότητα μπορεί να χρησιμοποιηθεί για την τοποθέτηση δύο div δίπλα-δίπλα στο CSS.
Σύνταξη
Η σύνταξη της ιδιότητας float είναι:
float: κανένας|αριστερά|δεξιάΑκολουθεί η περιγραφή για τις παραπάνω τιμές:
- κανένας: Χρησιμοποιείται για τον περιορισμό της αιώρησης.
- αριστερά: Χρησιμοποιείται για την επίπλευση στοιχείων στην αριστερή πλευρά.
- σωστά: Χρησιμοποιείται για την επίπλευση στοιχείων στη δεξιά πλευρά.
Ας περάσουμε στο παράδειγμα της τοποθέτησης του div δίπλα-δίπλα.
Παράδειγμα
Τώρα, θα δημιουργήσουμε δύο div μέσα στην ετικέτα
και θα εκχωρήσουμε το όνομα της τάξης ως ' div1 ' και ' div2 ”: < σώμα >< div τάξη = 'div1' >< / div >
< div τάξη = 'div2' >< / div >
< / σώμα >
Στη συνέχεια, χρησιμοποιήστε το ' .div1 ' και ' .div2 ” για πρόσβαση στα κοντέινερ που προστέθηκαν στην ενότητα HTML. Θα χρησιμοποιήσουμε και τα δύο div στην ίδια κλάση επειδή οι ιδιότητες και οι τιμές που θα εκχωρήσουμε και στα δύο είναι ίδιες.
Στη συνέχεια, εκχωρούμε την τιμή της ιδιότητας float ως ' αριστερά ' και ορίστε το πλάτος και το ύψος του div ως ' πενήντα% ' και ' 40% '. Χρησιμοποιούμε επίσης την ιδιότητα box-sizing και ορίζουμε την τιμή της ως ' περίγραμμα-κουτί '. Επιπλέον, ορίστε το χρώμα φόντου του div ως ' rgb(7, 255, 222) ' και ορίστε τις τιμές της περιουσίας συνόρων ως ' 3 εικονοστοιχεία », « στερεός ', και ' rgb(255, 0, 255) ”:
.div1 , .div2 {φλοτέρ : αριστερά ;
πλάτος : πενήντα% ;
ύψος : 40% ;
μέγεθος κουτιού : περίγραμμα-κουτί ;
Ιστορικό : rgb ( 7 , 255 , 222 ) ;
σύνορο : 3 εικονοστοιχεία στερεός rgb ( 255 , 0 , 255 ) ;
}
Σημείωση: Μπορείτε να τοποθετήσετε δύο div δίπλα-δίπλα χωρίς να χρησιμοποιήσετε την ιδιότητα μεγέθους πλαισίου και την ιδιότητα περιγράμματος ορίζοντας τα διαφορετικά χρώματα φόντου των div.
Μόλις εφαρμόσετε τον παραπάνω κώδικα, εκτελείτε το αρχείο HTML και δείτε το αποτέλεσμα:
Σημείωση: Για να δημιουργήσετε ένα κενό μεταξύ δύο div, δημιουργήστε πρώτα ένα άλλο div και μετά ορίστε το περιθώριο του div ανάλογα.
συμπέρασμα
Τα Div μπορούν να τοποθετηθούν δίπλα-δίπλα χρησιμοποιώντας τρεις διαφορετικές μεθόδους CSS, οι οποίες είναι οι « καλώδιο ' και ' πλέγμα ' τιμές της ιδιότητας εμφάνισης και το ' φλοτέρ ” ιδιοκτησία. Κάθε μία από τις μεθόδους λειτουργεί αποτελεσματικά. Ωστόσο, μπορείτε να χρησιμοποιήσετε οποιοδήποτε από αυτά σύμφωνα με τις απαιτήσεις μας. Σε αυτόν τον οδηγό, έχουμε συζητήσει τρεις μεθόδους για να τοποθετήσετε το div δίπλα-δίπλα χρησιμοποιώντας το CSS και παρέχουμε σχετικά παραδείγματα.