Χρειάζεστε τον κωδικό για να τυλίξετε κείμενο γύρω από μια εικόνα; Κανονικά όταν δημιουργείτε μια σελίδα HTML , όλα ρέουν γραμμικά, δηλαδή το ένα μπλοκ αμέσως μετά το άλλο. Όλες οι προηγούμενες αναρτήσεις μου είναι ένα παράδειγμα αυτού, δηλαδή κείμενο, μετά εικόνα, μετά κείμενο κ.λπ.

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

Ωστόσο, αυτές τις μέρες το W3C συνιστά τη χρήση CSS αντί για HTML για αυτού του είδους τις εργασίες. Θα αναφέρω και τις δύο μεθόδους παρακάτω, αλλά αν μπορείτε, είναι καλύτερα να χρησιμοποιήσετε CSS , καθώς είναι πιο προσαρμόσιμο σε responsive σχέδια ιστοτόπων.

Τυλίξτε κείμενο γύρω από την εικόνα χρησιμοποιώντας HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Δυσκολεύει σαγονίτιδα^(Duis) . Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

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

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

Εάν θέλετε το κείμενο να εμφανίζεται στα αριστερά και η εικόνα να εμφανίζεται στο άκρο δεξιά, απλώς αλλάξτε την παράμετρο στοίχισης σε "δεξιά".

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Δυσκολεύει σαγονίτιδα^(Duis) . Cum sociis natoque penatibus et magnis disparturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

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

Μπορείτε να προσθέσετε περιθώρια σε μια εικόνα χρησιμοποιώντας τον ακόλουθο κώδικα στυλ CSS :

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

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

Βασικά, οι τέσσερις αριθμοί αντιπροσωπεύουν ΠΑΝΩ ΔΕΞΙΑ ΚΑΤΩ ΑΡΙΣΤΕΡΑ^{(TOP RIGHT BOTTOM LEFT)} . Επομένως, εάν θέλετε να προσθέσετε το λευκό διάστημα σε μια εικόνα με δεξιά στοίχιση, θα κάνετε το εξής:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

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

Τυλίξτε κείμενο γύρω από την εικόνα χρησιμοποιώντας CSS

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

<img src="IMAGE URL" alt="A photo" class="left" />

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

Στην ετικέτα IMG , απλώς αντιστοιχίζετε μια κλάση στην ετικέτα και της δίνετε ένα όνομα. Στο παράδειγμά μου, ονόμασα την τάξη αριστερά^(left) . Στο φύλλο στυλ μου, το μόνο που έχω να κάνω είναι να προσθέσω τον ακόλουθο κώδικα:

.left {
 float: left;
 padding: 0 10px 0 0;}

Όπως μπορείτε να δείτε, πρόσθεσα 10 εικονοστοιχεία padding στη δεξιά πλευρά της εικόνας με αριστερή στοίχιση. Χρησιμοποίησα επίσης την ιδιότητα float για να μετακινήσω την εικόνα από την κανονική ροή του εγγράφου και να την τοποθετήσω στην αριστερή πλευρά του γονικού κοντέινερ.

Όπως μπορείτε να δείτε, είναι πολύ πιο καθαρό από την προσθήκη όλου αυτού του κώδικα στην ίδια την ετικέτα IMG . Είναι επίσης πιο εύκολο στη διαχείριση και μπορείτε να χρησιμοποιήσετε πολύ περισσότερες ιδιότητες CSS για να προσαρμόσετε την εμφάνιση στην ιστοσελίδα σας. Εάν έχετε οποιεσδήποτε ερωτήσεις, μη διστάσετε να σχολιάσετε. Απολαμβάνω!

HTML Code to Wrap Text Around Image

Need the code tо wrap text around an image? Normally when yоυ creatе аn HTML page, everything flows lіnearlу, meaning onе block directly after another. All of my prеvious posts are an example of this, i.e. text, then picture, then text, etc.

Sometimes you may want to include text next to an image instead of below it. This is called wrapping text around the image. It’s actually fairly easy to wrap text using HTML. Note that you don’t have to use CSS in order to wrap text.

However, these days the W3C recommends using CSS instead of HTML for these kinds of tasks. I’ll mention both methods below, but if you can, it’s better to use CSS since it’s more adaptable to responsive website designs.

Wrap Text Around Image using HTML

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

In order to have the text wrap along the right side of the image, you have to align the picture to the left:

<img src="IMAGE URL" align="left" /><p>Your text goes here.</p>

If you want the text to appear on the left and the image to appear at the far right, just change the align parameter to “right”.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis adipiscing tincidunt sagittis. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque nunc in lorem egestas non imperdiet enim congue.

<img src="IMAGE URL" align="right" /><p>Your text goes here.</p>

That’s it! Pretty easy right? The only time you would want to use CSS is if you want to add margins to the pictures, so that there is some space between the text and the image.

You can add margins to a picture by using the following CSS styling code:

<img src=”IMAGE URL” align=”left” style=”margin: 0px 10px 0px 0px;” /><p>Your text goes here.</p>

The above code uses the MARGIN CSS element to add 10 pixels of whitespace on the right side of the image. Since we have aligned the image left, we want to add the whitespace to the right.

Basically, the four numbers represent TOP RIGHT BOTTOM LEFT. So if you want to add the white space to a right-aligned image, you would do this:

<img src=”IMAGE URL” align=”right” style=”margin: 0px 0px 0px 10px;” /><p>Your text goes here.</p>

So it’s fairly simple to use HTML to perform this task, but once again, it may not work well for responsive sites.

Wrap Text Around Image using CSS

The better way to wrap text around an image is to use CSS. It’s gives you more fine grain control over the positioning of the elements and works better with modern coding standards.

<img src="IMAGE URL" alt="A photo" class="left" />

Even though I included CSS directly into the image tag in the HTML example, you really should never do that anymore either. Instead, you should have a separate file called a stylesheet that holds all of your CSS code.

In the IMG tag, you simply assign a class to the tag and give it a name. In my example, I named the class left. In my stylesheet, all I have to do is add the following code:

.left {
 float: left;
 padding: 0 10px 0 0;}

As you can see, I added 10px of padding to the right side of the left-aligned image. I also used the float property to move the image out of the normal flow of the document and put it to the left side of the parent container.

As you can see, it’s much cleaner than adding all that code to the IMG tag itself. It’s also easier to manage and you can use a lot more CSS properties to customize the look on your webpage. If you have any questions, feel free to comment. Enjoy!

Related posts

• Πώς να σαρώσετε έναν κωδικό QR σε iPhone και Android

• Πώς να εκτυπώσετε μηνύματα κειμένου από το Android

• Αποθηκεύστε μια λίστα με τις διεργασίες που εκτελούνται σε ένα αρχείο κειμένου στα Windows

• Πώς να κατεβάσετε αρχεία και να προβάλετε κώδικα από το GitHub

• Αναζήτηση σε πολλά αρχεία κειμένου ταυτόχρονα

• Καταργήστε τις ετικέτες κειμένου από τα εικονίδια της επιφάνειας εργασίας στα Windows 7/8/10

• Πώς να διατηρείτε το λογισμικό του υπολογιστή σας ενημερωμένο αυτόματα

• Πώς να ανοίξετε αρχεία εικόνας EPS στα Windows

• Πώς να καμπυλώσετε το κείμενο στο Photoshop

• Πώς να κρατήσετε τον υπολογιστή σας με Windows ξύπνιο χωρίς να αγγίξετε το ποντίκι

• Ανακατεύθυνση της εξόδου από τη γραμμή εντολών των Windows σε ένα αρχείο κειμένου

• Διορθώστε τον κωδικό σφάλματος 8E5E03FA του Windows Update

• Πώς να μεταφέρετε μηνύματα κειμένου από το iPhone στο Android

• Πώς να απενεργοποιήσετε το κλειδί των Windows

• Πώς να φτιάξετε έναν κωδικό QR

• Πώς να κάνετε περίγραμμα κειμένου στο Photoshop

• Πώς να δημιουργήσετε μια ομάδα στο Microsoft Teams

• Τρόπος ροής κειμένου γύρω από μια εικόνα στο InDesign

• Πώς να μετατρέψετε έναν δυναμικό δίσκο σε έναν βασικό δίσκο

• Πώς να τραβήξετε στιγμιότυπα οθόνης στο Nintendo Switch