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

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

1. Δημιουργήστε ένα αρχείο CSS. Αν έχετε ήδη ένα αρχείο CSS για την ιστοσελίδα σας, επεξεργαστείτε το αρχείο CSS και προσθέστε τον ακόλουθο κώδικα.

2. Προσθέστε τον ακόλουθο κώδικα στο αρχείο CSS.

 .floatRight {float: δεξιά, margin-left: 20px} 

Συμβουλή: Η προσθήκη του πλωτήρα: αριστερά θα κάνει την εικόνα να επιπλέει στην αριστερή πλευρά του κειμένου.

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

 .floatRightClear {float: δεξιά, καθαρό: δεξιά, περιθώριο-αριστερά: 20px} 

3. Αφού δημιουργηθεί ο παραπάνω κώδικας, αποθηκεύστε το αρχείο CSS και καλέστε το από κάθε σελίδα HTML χρησιμοποιώντας κώδικα παρόμοιο με το παρακάτω παράδειγμα. Στο παράδειγμά μας, ονομάσαμε το αρχείο style.css του CSS.

4. Τέλος, προσθέστε το σε οποιαδήποτε εικόνα θέλετε να επιπλέει στη δεξιά πλευρά του δοχείου.