Benötigen Sie den Code, um Text um ein Bild zu legen? Normalerweise, wenn Sie eine HTML-Seite erstellen, fließt alles linear, dh ein Block direkt nach dem anderen. Alle meine früheren Posts sind ein Beispiel dafür, d. H. Text, dann Bild, dann Text usw.
Manchmal möchten Sie vielleicht Text neben einem Bild statt darunter einfügen. Dies wird als Umbruch des Textes um das Bild bezeichnet. Es ist eigentlich ziemlich einfach, Text mit HTML zu umbrechen. Beachten Sie, dass Sie zum Umbruch von Text kein CSS verwenden müssen.
Allerdings empfiehlt das W3C heutzutage, CSS anstelle von HTML zu verwenden für diese Art von Aufgaben. Ich erwähne beide Methoden unten, aber wenn Sie können, ist es besser, CSS zu verwenden, da es anpassbarer für Webseiten-Designs ist.
Umranden Sie Text um Bild mit HTML
Lorem ipsum dolor ist amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis Adipiscing Tincidunt Sagittis. Cum socians natoque penatibus und magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur mostie posuere laoreet. Wenn Sie den Text entlang der rechten Seite des Bildes umbrechen möchten, müssen Sie das Bild nach links ausrichten:
<img itemprop="image" data-original="IMAGE URL" align="left" /><p>Your text goes here.</p>
Wenn der Text links und das Bild ganz rechts angezeigt werden soll, ändern Sie einfach den Ausrichtungsparameter auf "rechts".
Lorem ipsum dolor sit amét, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis Adipiscing Tincidunt Sagittis. Cum socians natoque penatibus und magnis dis parturient montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur mostie posuere laoreet. Ut pellentesque nunc in lorem egestas nicht undurchdringlich enim congue.
<img itemprop="image" data-original="IMAGE URL" align="right" /><p>Your text goes here.</p>
Das ist es! Ziemlich einfach, oder? Die einzige Zeit, die Sie CSS verwenden möchten, ist, wenn Sie den Bildern Ränder hinzufügen möchten, so dass zwischen dem Text und dem Bild etwas Platz ist.
Sie können Ränder zu einem Bild hinzufügen folgenden CSS-Styling-Code:
<img itemprop="image" data-original=”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 Whitespace auf der rechten Seite des Bildes hinzuzufügen. Da wir das Bild nach links ausgerichtet haben, wollen wir das Leerzeichen nach rechts hinzufügen.
Grundsätzlich stehen die vier Zahlen für TOP RIGHT BOTTOM LEFT. Wenn Sie also den Leerraum zu einem rechts ausgerichteten Bild hinzufügen möchten, tun Sie dies:
<img itemprop="image" data-original=”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 einmal auszuführen Auch für reaktionsschnelle Websites funktioniert das Problem möglicherweise nicht.
Text um ein Bild mit CSS umbrechen
Die bessere Möglichkeit, Text um ein Bild zu legen, ist die Verwendung von CSS. Es gibt Ihnen feinere Kontrolle über die Positionierung der Elemente und funktioniert besser mit modernen Codierungsstandards.
<img itemprop="image" data-original="IMAGE URL" alt="A photo" class="lazy left" />
Obwohl ich CSS direkt in das Bild-Tag im HTML-Beispiel eingefügt habe Das solltest du auch nie mehr machen. Stattdessen sollten Sie eine separate Datei namens Stylesheet verwenden, die Ihren gesamten CSS-Code enthält.
Im IMG-Tag weisen Sie dem Tag einfach eine Klasse zu und vergeben einen Namen. In meinem Beispiel habe ich die Klasse linksgenannt. 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 10 Pixel Padding auf der rechten Seite des linksbündig ausgerichteten Bildes hinzugefügt . Ich habe auch die float -Eigenschaft verwendet, um das Bild aus dem normalen Fluss des Dokuments zu entfernen und es auf die linke Seite des übergeordneten Containers zu setzen.
Wie Sie sehen, ist es viel sauberer als den ganzen Code hinzuzufügen zum IMG-Tag selbst. Es ist auch einfacher zu verwalten und Sie können viel mehr CSS-Eigenschaften verwenden, um das Aussehen auf Ihrer Webseite anzupassen. Wenn Sie Fragen haben, zögern Sie nicht zu kommentieren. Viel Spaß!