Πώς να μετακινήσετε κείμενο γύρω από μια εικόνα με HTML ή CSS

Όταν συμπεριλαμβάνετε μια εικόνα με το κείμενο στην ιστοσελίδα σας, το προεπιλεγμένο στυλ εμφανίζει το γραφικό πάνω ή κάτω από το περιβάλλον περιεχόμενο, αφήνοντας κενό αριστερά και δεξιά της εικόνας. Αυτό αποβάλλει το χώρο και κάνει την εικόνα να φαίνεται αποσπασμένη από το κείμενο σας. Για να επιδιορθώσετε αυτό το θέμα, έχετε τη δυνατότητα να χρησιμοποιήσετε τη Γλώσσα σήμανσης HyperText (HTML) ή τα Φύλλα Στυλ (CSS) για να καθορίσετε τη θέση της εικόνας έτσι ώστε το κείμενο να αναδιπλώνεται γύρω από τα όρια της εικόνας. Χρησιμοποιήστε το HTML ή το CSS για να μετακινήσετε κείμενο γύρω από τις εικόνες σας, όπως προτιμάτε.

HTML

Βήμα 1

Ξεκινήστε το αρχείο σελίδας στο πρόγραμμα επεξεργασίας κειμένου του υπολογιστή σας και τοποθετήστε τον κέρσορα μέσα στην ετικέτα. Πληκτρολογήστε "align =" και ακολουθήστε το με εισαγωγικά όπως αυτό:

Βήμα 2

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

Αποθήκευση του αρχείου.

CSS

Βήμα 1

Τοποθετήστε τον κέρσορα μέσα στην ετικέτα και πληκτρολογήστε "style =" με ένα σύνολο εισαγωγικών σημάδια πριν από την τελευταία γωνία. Για να απεικονίσετε:

Βήμα 2

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

Αποθηκεύστε το έγγραφό σας.