Χρησιμοποιήστε το CSS Align Left to Float a Website Image to the Left of Text

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

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

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

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

ετικέτα). Ακολουθεί η αρχική σήμανση HTML:

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

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

αριστερά) στο στοιχείο εικόνας για να χρησιμεύσει ως γάντζος στο οποίο μπορούν να συνδεθούν ιδιότητες.

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

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

Προσθήκη στυλ CSS

Προσθέστε αυτόν τον κανόνα στον ιστότοπο φύλλο στυλ:

.αριστερά {
float: αριστερά;
επένδυση: 0 20px 20px 0;
}

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

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

Άλλοι τρόποι επίτευξης αυτών των στυλ

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

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

Για το στυλ αυτής της εικόνας, γράψτε αυτό το CSS:

.main-content img { 
float: αριστερά; 
επένδυση: 0 20px 20px 0;
}

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

Αποφύγετε τα ενσωματωμένα στυλ

Τέλος, θα μπορούσατε να χρησιμοποιήσετε ενσωματωμένα στυλ:

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

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