HTML -Code, um Text um das Bild zu wickeln

Benötigen Sie den Code, um Text um ein Bild zu wickeln? Wenn Sie eine HTML -Seite erstellen, fließt normalerweise alles linear, was einem Block direkt nach dem anderen bedeutet. Alle meine vorherigen Beiträge sind ein Beispiel dafür, ich.e. Text, dann Bild, dann Text usw.

Manchmal möchten Sie möglicherweise Text neben einem Bild anstelle von unten einfügen. Dies wird als Wraping -Text um das Bild bezeichnet. Es ist eigentlich ziemlich einfach, Text mit HTML zu wickeln. Beachten Sie, dass Sie CSS nicht verwenden müssen, um Text zu wickeln.

Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Fusce dictum gravida enim, quis ultrikies mauris posuere quis. Duis Adipiscing Tincidunt Sagittis. Cum sociis nato penatibus et magnis dis pespurient montes, nascetur laviculus mu. Aliquam A Felis Vitae Augue Lobortis Dictum. Curabitur Molestie Posuere Laoreet. UT Pellentesque Nunc in Lorem egestos nicht imperdietische Congue.

Um den Text entlang der rechten Seite des Bildes zu haben, müssen Sie das Bild links ausrichten:

 
Lorem Ipsum Dolor Sit Amet, Consectetur Adipiscing Elit. Fusce dictum gravida enim, quis ultrikies mauris posuere quis. Duis Adipiscing Tincidunt Sagittis. Cum sociis nato penatibus et magnis dis pespurient montes, nascetur laviculus mu. Aliquam A Felis Vitae Augue Lobortis Dictum. Curabitur Molestie Posuere Laoreet. UT Pellentesque Nunc in Lorem egestos nicht imperdietische Congue.
 
 
Obwohl ich CSS direkt in das Bild -Tag in das HTML -Beispiel einbezogen habe, sollten Sie das auch nie mehr tun. Stattdessen sollten Sie eine separate Datei mit dem Namen 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 an. In meinem Beispiel habe ich die Klasse benannt links. In meinem Stylesheet muss ich nur den folgenden Code hinzufügen:
 
.links float: links; Polsterung: 0 10px 0 0;
 
Wie Sie sehen können, habe ich 10px Polster auf die rechte Seite des links ausgerichteten Bildes hinzugefügt. Ich habe auch die Float -Eigenschaft verwendet, um das Bild aus dem normalen Fluss des Dokuments zu verschieben und auf die linke Seite des übergeordneten Containers zu legen.
 
Wie Sie sehen können, ist es viel sauberer, als den gesamten Code dem IMG -Tag selbst hinzuzufügen. Es ist auch einfacher zu verwalten und Sie können viel mehr CSS -Eigenschaften verwenden, um den Look auf Ihrer Webseite anzupassen. Wenn Sie Fragen haben, können Sie gerne kommentieren. Genießen!