Πώς να μεταφέρετε μια εικόνα στα δεξιά του κειμένου

Αυτό το σεμινάριο διάρκειας πέντε λεπτών εξηγεί πώς

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

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

Ξεκινώντας

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

):

Ο ίδιος ο ίδιος δήλωσε ότι δεν έλαβε μέρος στην προσωρινή διακοπή του διαγωνισμού. Ο μη κυβερνητικός εκπρόσωπος, εκτός από τον εργαζόμενο και τον πάροχο της άλλης. Βρισκόμαστε σε μια ασυνήθιστη άσκηση, εκτός από την περίσταση. Mollit anim id est laborum.

Στη συνέχεια, προσθέστε ένα χαρακτηριστικό στυλ στην εικόνα και εφαρμόστε την ιδιότητα float:

style = "float: right;" />

Το κείμενό σας θα μπλοκάρει ακριβώς επάνω στην εικόνα, οπότε προσθέστε κάποια περιθώρια στην εικόνα για να γίνει ευκολότερη η ανάγνωση:

margin: 0 5px 0 0; " /

Η ιδιότητα περιθωρίου περιθωρίου εφαρμόζεται περιθώρια στην κορυφή, δεξιά, κάτω και αριστερά ( TRBL ).

Τυλίγοντας

Και αυτό το κάνει. Τώρα βλέπετε ότι η κυμαινόμενη εικόνα προς τα δεξιά δεν είναι καθόλου δύσκολη. Ενδέχεται επίσης να ενδιαφέρεστε να μετακινήσετε μια εικόνα προς τα αριστερά και να την μετακινήσετε στο κέντρο. Ενώ είναι δυνατή η πρώτη κίνηση, δυστυχώς δεν μπορείτε να μετακινήσετε μια εικόνα στο κέντρο, καθώς συνήθως απαιτεί μια διάταξη δύο στηλών.