Πώς να μετακινήσετε μια εικόνα στα αριστερά του κειμένου σε μια ιστοσελίδα

Χρησιμοποιώντας το CSS για να ευθυγραμμίσετε μια εικόνα στην αριστερή πλευρά μιας διάταξης ιστοσελίδας

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

Η ικανότητα να κάνει αυτό το κείμενο και αυτές οι εικόνες να λειτουργούν καλά μαζί είναι αυτό που θέτει μεγάλους web designers εκτός! Δεν θέλετε απλώς να εμφανίζονται το κείμενο και οι εικόνες σας το ένα μετά το άλλο, και έτσι θα προετοιμαστούν αυτά τα στοιχεία σε επίπεδο μπλοκ . Όχι, θέλετε κάποιο έλεγχο για το πώς το κείμενο και οι εικόνες ρέουν μαζί σε αυτό που θα είναι τελικά ο οπτικός σχεδιασμός της ιστοσελίδας σας.

Έχοντας μια εικόνα που είναι ευθυγραμμισμένη με την αριστερή πλευρά μιας σελίδας ενώ το κείμενο της σελίδας αυτής κυλάει γύρω από αυτήν είναι μια κοινή επεξεργασία σχεδιασμού για έντυπο σχεδιασμό και επίσης για ιστοσελίδες. Σε όρους ιστού, αυτό το φαινόμενο είναι γνωστό ως κυμαινόμενο είδωλο . Αυτό το στυλ επιτυγχάνεται με την ιδιότητα CSS για "float". Αυτή η ιδιότητα επιτρέπει την ροή κειμένου γύρω από την αριστερά ευθυγραμμισμένη εικόνα στη δεξιά πλευρά της. (Ή γύρω από μια δεξιά ευθυγραμμισμένη εικόνα στην αριστερή πλευρά της.) Ας ρίξουμε μια ματιά στο πώς να επιτύχουμε αυτό το οπτικό εφέ.

Ξεκινήστε με HTML

Το πρώτο πράγμα που θα πρέπει να κάνετε είναι να έχετε κάποια HTML με την οποία θα εργαστείτε. Για παράδειγμα, θα γράψουμε μια παράγραφο κειμένου και θα προσθέσουμε μια εικόνα στην αρχή της παραγράφου (πριν το κείμενο, αλλά μετά την ετικέτα

ανοίγματος). Εδώ φαίνεται αυτό το HTML markup:

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

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

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

Σημειώστε ότι αυτή η κατηγορία "αριστερά" δεν κάνει τίποτα από μόνο του! Για να επιτύχουμε το επιθυμητό στυλ, πρέπει να χρησιμοποιήσουμε το CSS στη συνέχεια.

Στυλ CSS

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

.ελεύθερο {επιπλέει: αριστερά. συμπλήρωμα: 0 20px 20px 0; }}

Αυτό το στυλ επιπλέει αυτή την εικόνα στα αριστερά και προσθέτει ένα μικρό παραπέτασμα (χρησιμοποιώντας κάποια συντομογραφία CSS) στο δεξιό και το κάτω μέρος της εικόνας.

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

Εναλλακτικοί τρόποι για την επίτευξη αυτών των μορφών

Αυτή η προσέγγιση που δίνει στο στοιχείο εικόνας ένα χαρακτηριστικό κλάσης και στη συνέχεια χρησιμοποιώντας ένα γενικό στυλ CSS που επιπλέει το στοιχείο είναι μόνο ένας τρόπος που θα μπορούσατε να ολοκληρώσετε αυτήν την εμφάνιση "αριστερά ευθυγραμμισμένη εικόνα". Θα μπορούσατε επίσης να αφαιρέσετε την αξία της κλάσης από την εικόνα και να την στυλίσατε με το CSS γράφοντας έναν πιο συγκεκριμένο επιλογέα. Για παράδειγμα, ας δούμε ένα παράδειγμα όπου αυτή η εικόνα βρίσκεται μέσα σε μια διαίρεση με τιμή κλάσης "main-content".

Σε αυτό το παράδειγμα, έχουμε μια εικόνα μιας κεφαλίδας φωτογραφίας, οπότε αυτό το κείμενο θα είναι πιθανότατα για το πρόσωπο για το οποίο είναι το headshot.

Για να διαμορφώσετε αυτήν την εικόνα, θα μπορούσατε να γράψετε αυτό το CSS:

.main-content img {float: left; συμπλήρωμα: 0 20px 20px 0; }}

Σε αυτό το sceario, η εικόνα μας θα ευθυγραμμιστεί προς τα αριστερά, με το κείμενο να επιπλέει γύρω του όπως πριν, αλλά δεν χρειαζόταν να προσθέσουμε επιπλέον αξία στην τάξη μας. Κάνοντας αυτό σε κλίμακα μπορεί να βοηθήσει στη δημιουργία ενός μικρότερου αρχείου HTML, το οποίο θα είναι πιο εύκολο στη διαχείριση και μπορεί επίσης να συμβάλει στη βελτίωση της απόδοσης.

Τέλος, μπορείτε να προσθέσετε ακόμη και τα στυλ απευθείας στο HTML markup σας, όπως αυτό:

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

Αυτή η μέθοδος ονομάζεται " inline styles ". Δεν είναι σκόπιμο επειδή συνδυάζει σαφώς το στυλ ενός στοιχείου με τη δομική σήμανση του. Οι βέλτιστες πρακτικές του διαδικτύου υπαγορεύουν ότι το στυλ και η δομή μιας σελίδας πρέπει να παραμείνουν χωριστά. Αυτό είναι ιδιαίτερα χρήσιμο όταν η σελίδα σας χρειάζεται να αλλάξει τη διάταξη και να αναζητήσει διαφορετικά μεγέθη οθόνης και συσκευές με έναν ανταποκρινόμενο ιστότοπο. Έχοντας το στυλ της σελίδας που είναι συνυφασμένη με το HTML, θα είναι πολύ πιο δύσκολο να δημιουργήσετε ερωτήματα μέσων που θα προσαρμόσουν την εμφάνιση του ιστότοπού σας όπως απαιτείται για αυτές τις διαφορετικές οθόνες.

Αρχικό άρθρο από την Jennifer Krynin. Επεξεργασμένο από τον Jeremy Girard στις 4/3/17.