Benötigen Sie den Code, um Text um ein Bild zu wickeln? Wenn Sie eine HTML-Seite erstellen, fließt normalerweise alles linear, dh ein Block direkt nach dem anderen. Alle meine vorherigen Beiträge sind ein Beispiel dafür, dh Text, dann Bild, dann Text usw.
Manchmal möchten Sie möglicherweise Text neben einem Bild anstelle von darunter einfügen. Dies wird als Umbrechen von Text um das Bild bezeichnet. Es ist eigentlich ziemlich einfach, Text mit HTML zu umbrechen. Beachten Sie, dass Sie kein CSS verwenden müssen, um Text zu umschließen.
Heutzutage empfiehlt das W3C jedoch, CSS für diese Aufgaben anstelle von HTML zu verwenden. Ich werde beide Methoden unten erwähnen, aber wenn Sie können, ist es besser, CSS zu verwenden, da es anpassungsfähiger für Website-Designs ist.
Umbrechen Sie den Text mit HTML
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis Adipiscing tincidunt sagittis. Cum Sociis natoque penatibus und magnis disurures montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque Nonnen in Lorem Egestas nicht imperdiet enim argumentieren.
Damit der Text auf der rechten Seite des Bilds angezeigt wird, müssen Sie das Bild nach links ausrichten:
Ihr Text geht hierher.
Wenn Sie möchten, dass der Text links und das Bild ganz rechts angezeigt wird, ändern Sie den Ausrichtungsparameter einfach in "rechts".
Lorem ipsum dolor sitzt amet, consectetur adipiscing elit. Fusce dictum gravida enim, quis ultricies mauris posuere quis. Duis Adipiscing tincidunt sagittis. Cum Sociis natoque penatibus und magnis disurures montes, nascetur ridiculus mus. Aliquam a felis vitae augue lobortis dictum. Curabitur molestie posuere laoreet. Ut pellentesque Nonnen in Lorem Egestas nicht imperdiet enim argumentieren.
Ihr Text geht hierher.
Das ist es! Ganz einfach richtig? Die einzige Zeit, in der 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 Abstand ist.
Sie können einem Bild Ränder hinzufügen, indem Sie den folgenden CSS-Stilcode verwenden:
Ihr Text geht hierher.
Der obige Code verwendet das MARGIN-CSS-Element, um auf der rechten Seite des Bilds 10 Pixel Whitespace hinzuzufügen. Da wir das Bild links ausgerichtet haben, möchten wir den Leerraum nach rechts einfügen.
Grundsätzlich stehen die vier Zahlen für TOP RECHTS UNTEN LINKS. Wenn Sie also ein Leerzeichen zu einem nach rechts ausgerichteten Bild hinzufügen möchten, würden Sie Folgendes tun:
Ihr Text geht hierher.
Daher ist es relativ einfach, HTML für diese Aufgabe zu verwenden, aber auch hier kann es für responsive Sites nicht funktionieren.
Umbrechen Sie den Text mit CSS
Die beste Möglichkeit, Text um ein Bild zu wickeln, ist die Verwendung von CSS. Es gibt Ihnen eine feinere Kontrolle über die Positionierung der Elemente und arbeitet besser mit modernen Kodierungsstandards.
Obwohl ich im HTML-Beispiel CSS direkt in das image-Tag eingefügt habe, sollten Sie das auch nie mehr tun. Stattdessen sollten Sie über eine separate Datei verfügen, die als Stylesheet bezeichnet wird und den 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 links benannt . In meinem Stylesheet muss ich lediglich folgenden Code hinzufügen:
.left {float: left; Auffüllen: 0 10px 0 0;} Wie Sie sehen können, fügte ich der linken Seite des linksbündigen Bildes 10 Pixel hinzu. 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 verschieben.
Wie Sie sehen, 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 das Aussehen Ihrer Webseite anzupassen. Wenn Sie Fragen haben, können Sie dies gerne kommentieren. Genießen!
