HTML κώδικα για την περιτύλιξη κειμένου γύρω από την εικόνα

• 2019

Χρειάζεστε τον κώδικα για να τυλίξετε το κείμενο γύρω από μια εικόνα; Κανονικά, όταν δημιουργείτε μια σελίδα HTML, τα πάντα ρέουν γραμμικά, δηλαδή ένα μπλοκ αμέσως μετά το άλλο. Όλες οι προηγούμενες θέσεις μου είναι ένα παράδειγμα αυτού, δηλαδή κειμένου, έπειτα εικόνας, έπειτα κειμένου κ.λπ.

Μερικές φορές μπορεί να θέλετε να συμπεριλάβετε κείμενο δίπλα σε μια εικόνα αντί της κάτω αυτής. Αυτό ονομάζεται περιτύλιγμα κειμένου γύρω από την εικόνα. Είναι πραγματικά αρκετά εύκολο να τυλίξετε το κείμενο χρησιμοποιώντας HTML. Σημειώστε ότι δεν χρειάζεται να χρησιμοποιήσετε το CSS για να τυλίξετε το κείμενο.

Ωστόσο, αυτές τις μέρες το W3C συνιστά τη χρήση CSS αντί HTML για αυτά τα είδη εργασιών. Θα αναφέρω και τις δύο μεθόδους παρακάτω, αλλά αν μπορείτε, είναι καλύτερο να χρησιμοποιήσετε το CSS, καθώς είναι πιο προσαρμόσιμο στα ανταποκρινόμενα σχέδια ιστοσελίδων.

Τυλίξτε το κείμενο γύρω από την εικόνα χρησιμοποιώντας HTML

Ο ιστότοπός μας βρίσκεται σε πλήρη κατάσταση, ακολουθώντας τον εισηγητή. Ο Fusce δηλώνει ότι είναι έγκυος, κάτι που είναι πολύ σημαντικό. Duis adipiscing tincidunt sagittis. Η κοινωνική ασφάλιση των παιδιών και των ηλικιωμένων είναι απαραίτητη. Οπωσδήποτε, το έμβλημά μου είναι το λογότυπο. Curabitur molestie posuere laoreet. Η ουσία pellentesque nunc σε lorem egestas non imperdiet enim congue.

Για να έχετε το κείμενο τυλιγμένο κατά μήκος της δεξιάς πλευράς της εικόνας, πρέπει να ευθυγραμμίσετε την εικόνα προς τα αριστερά:

Το κείμενό σας πηγαίνει εδώ.

Εάν θέλετε το κείμενο να εμφανίζεται στα αριστερά και η εικόνα να εμφανίζεται στα δεξιά, απλά αλλάξτε την παράμετρο ευθυγράμμισης σε "δεξιά".

Ο ιστότοπός μας βρίσκεται σε πλήρη κατάσταση, ακολουθώντας τον εισηγητή. Ο Fusce δηλώνει ότι είναι έγκυος, κάτι που είναι πολύ σημαντικό. Duis adipiscing tincidunt sagittis. Η κοινωνική ασφάλιση των παιδιών και των ηλικιωμένων είναι απαραίτητη. Οπωσδήποτε, το έμβλημά μου είναι το λογότυπο. Curabitur molestie posuere laoreet. Η ουσία pellentesque nunc σε lorem egestas non imperdiet enim congue.

Το κείμενό σας πηγαίνει εδώ.

Αυτό είναι! Αρκετά εύκολο; Η μόνη φορά που θα θέλατε να χρησιμοποιήσετε το CSS είναι εάν θέλετε να προσθέσετε περιθώρια στις εικόνες, έτσι ώστε να υπάρχει κάποιο κενό μεταξύ του κειμένου και της εικόνας.

Μπορείτε να προσθέσετε περιθώρια σε μια εικόνα χρησιμοποιώντας τον ακόλουθο κώδικα στυλ CSS:

Το κείμενό σας πηγαίνει εδώ.

Ο παραπάνω κώδικας χρησιμοποιεί το στοιχείο MARGIN CSS για να προσθέσει 10 εικονοστοιχεία λευκού χρώματος στη δεξιά πλευρά της εικόνας. Δεδομένου ότι έχουμε ευθυγραμμίσει την εικόνα αριστερά, θέλουμε να προσθέσουμε τα κενά δεξιά.

Βασικά, οι τέσσερις αριθμοί αντιπροσωπεύουν το TOP RIGHT BOTTOM LEFT. Επομένως, αν θέλετε να προσθέσετε τον λευκό χώρο σε μια δεξιά ευθυγραμμισμένη εικόνα, θα το κάνετε αυτό:

Το κείμενό σας πηγαίνει εδώ.

Επομένως, είναι αρκετά απλό να χρησιμοποιήσετε την HTML για να εκτελέσετε αυτήν την εργασία, αλλά για άλλη μια φορά, μπορεί να μην λειτουργήσει καλά για ανταποκρινόμενες τοποθεσίες.

Τυλίξτε το κείμενο γύρω από την εικόνα χρησιμοποιώντας το CSS

Ο καλύτερος τρόπος για να τυλίξετε το κείμενο γύρω από μια εικόνα είναι να χρησιμοποιήσετε το CSS. Σας δίνει περισσότερο λεπτό έλεγχο των σιτηρών για την τοποθέτηση των στοιχείων και λειτουργεί καλύτερα με τα σύγχρονα πρότυπα κωδικοποίησης.

Παρόλο που έχω συμπεριλάβει το CSS απευθείας στην ετικέτα εικόνας στο παράδειγμα HTML, δεν θα πρέπει ποτέ να το κάνεις πια. Αντ 'αυτού, θα πρέπει να έχετε ένα ξεχωριστό αρχείο που ονομάζεται φύλλο στυλ που περιέχει όλο τον κώδικα CSS.

Στην ετικέτα IMG, απλά ορίζετε μια κλάση στην ετικέτα και της δίνετε ένα όνομα. Στο παράδειγμά μου, ονόμασα την τάξη αριστερά . Στο φύλλο στυλ μου, το μόνο που έχω να κάνω είναι να προσθέσω τον ακόλουθο κώδικα:

 .left {float: αριστερά. πληκτρολόγηση: 0 10px 0 0;} 

Όπως μπορείτε να δείτε, προσθέσαμε 10pcs padding στη δεξιά πλευρά της αριστερά ευθυγραμμισμένης εικόνας. Επίσης, χρησιμοποίησα την ιδιότητα float για να μετακινήσω την εικόνα από την κανονική ροή του εγγράφου και να την τοποθετήσω στην αριστερή πλευρά του γονικού δοχείου.

Όπως μπορείτε να δείτε, είναι πολύ πιο καθαρό από την προσθήκη αυτού του κώδικα στην ίδια την ετικέτα IMG. Είναι επίσης πιο εύκολο να διαχειριστείτε και μπορείτε να χρησιμοποιήσετε πολύ περισσότερες ιδιότητες CSS για να προσαρμόσετε την εμφάνιση στην ιστοσελίδα σας. Αν έχετε οποιεσδήποτε ερωτήσεις, μην διστάσετε να σχολιάσετε. Απολαμβάνω!