Benötigen Sie den Code, um Text um ein Bild zu fließen? Normalerweise fließt beim Erstellen einer HTML - Seite alles linear, also ein Block direkt nach dem anderen. Alle meine bisherigen Beiträge sind ein Beispiel dafür, also Text, dann Bild, dann Text usw.

Manchmal möchten Sie vielleicht Text neben einem Bild statt darunter einfügen. Dies wird als Umbruch von Text um das Bild bezeichnet. Es ist eigentlich ziemlich einfach, Text mit HTML umzubrechen^(HTML) . Beachten Sie, dass Sie kein CSS verwenden müssen, um Text umzubrechen.

Heutzutage empfiehlt das W3C jedoch, für diese Art von Aufgaben CSS anstelle von HTML zu verwenden. ^(HTML)Ich werde beide Methoden unten erwähnen, aber wenn Sie können, ist es besser, CSS zu verwenden, da es besser an responsive Website-Designs angepasst werden kann.

Text mithilfe von HTML um das Bild fließen lassen

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.

Damit der Text entlang der rechten Seite des Bildes umbrochen wird, müssen Sie das Bild linksbündig ausrichten:

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

Wenn Sie möchten, dass der Text links und das Bild ganz rechts angezeigt wird, ändern Sie einfach den Ausrichtungsparameter auf „rechts“.

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>

Das ist es! Ziemlich^(Pretty) einfach oder? Sie sollten CSS nur dann verwenden, wenn Sie den Bildern Ränder hinzufügen möchten, damit zwischen dem Text und dem Bild etwas Platz bleibt.

Sie können einem Bild Ränder hinzufügen, indem Sie den folgenden CSS -Stilcode verwenden:

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

Der obige Code verwendet das MARGIN CSS- Element, um 10 Pixel Leerraum auf der rechten Seite des Bildes hinzuzufügen. Da wir das Bild links ausgerichtet haben, möchten wir den Leerraum rechts hinzufügen.

Grundsätzlich repräsentieren die vier Zahlen OBEN RECHTS UNTEN LINKS^{(TOP RIGHT BOTTOM LEFT)} . Wenn Sie also den Leerraum zu einem rechtsbündigen Bild hinzufügen möchten, würden Sie Folgendes tun:

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

Es ist also ziemlich einfach, HTML zu verwenden, um diese Aufgabe auszuführen, aber auch hier funktioniert es möglicherweise nicht gut für responsive Websites.

Text mithilfe von CSS um das Bild fließen lassen

Der bessere Weg, Text um ein Bild zu fließen, ist die Verwendung von CSS . Es gibt Ihnen eine genauere Kontrolle über die Positionierung der Elemente und funktioniert besser mit modernen Codierungsstandards.

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

Auch wenn ich CSS im ^(CSS)HTML -Beispiel direkt in das Image-Tag eingebunden habe, sollten Sie das auch wirklich nie mehr tun. Stattdessen sollten Sie eine separate Datei namens Stylesheet haben, die Ihren gesamten CSS -Code enthält.

Im IMG -Tag weisen Sie dem Tag einfach eine Klasse zu und geben ihm einen Namen. In meinem Beispiel habe ich die Klasse left benannt . In meinem Stylesheet muss ich nur den folgenden Code hinzufügen:

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

Wie Sie sehen können, habe ich auf der rechten Seite des linksbündigen Bildes 10 Pixel Polsterung hinzugefügt. Ich habe auch die Float-Eigenschaft verwendet, um das Bild aus dem normalen Fluss des Dokuments herauszubewegen und es auf der linken Seite des übergeordneten Containers zu platzieren.

Wie Sie sehen können, ist es viel sauberer, als den ganzen Code zum IMG -Tag selbst hinzuzufügen. Es ist auch einfacher zu verwalten und Sie können viel mehr CSS - Eigenschaften verwenden, um das Aussehen Ihrer Webseite anzupassen. Wenn Sie Fragen haben, zögern Sie nicht zu kommentieren. Genießen!

HTML Code to Wrap Text Around Image

Need the сode to wrap text around an image? Normally when you create an HTML page, everything flоws linearlу, meаning one block directly after another. All of my previous posts are an example of this, i.е. text, then picture, thеn 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

• So scannen Sie einen QR-Code auf iPhone und Android

• So drucken Sie Textnachrichten von Android

• Speichern Sie eine Liste der laufenden Prozesse in einer Textdatei in Windows

• So laden Sie Dateien herunter und zeigen Code von GitHub an

• Durchsuchen Sie gleichzeitig mehrere Textdateien

• So bauen Sie Ihren eigenen Laptop

• Extrahieren Sie Text aus PDF- und Bilddateien

• Ausgabe von der Windows-Befehlszeile in eine Textdatei umleiten

• So zeigen Sie den Quellcode einer Open-Source-Software an

• So drehen Sie Text und Bilder in Photoshop

• SynWrite Editor: Kostenloser Text- und Quellcode-Editor für Windows 10

• Konvertieren Sie Text in HTML oder XHTML mit MarkdownPad für Windows PC

• So öffnen Sie EPS-Bilddateien unter Windows

• So erstellen Sie ein Team in Microsoft Teams

• So erstellen und scannen Sie einen Spotify-Code

• Kostenlose Online-OCR-Sites und -Dienste zum Extrahieren von Text aus Bildern

• So laden Sie das Offline-Installationsprogramm für Google Chrome (Standalone) herunter

• So machen Sie Screenshots auf Nintendo Switch

• Entfernen Sie die Textbeschriftungen von Desktopsymbolen in Windows 7/8/10

• So fließen Sie Text um ein Bild in InDesign