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, d. H. 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.
Heute empfiehlt das W3C jedoch, für diese Aufgaben CSS 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 sitzen 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 Bildes umbrochen 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 sitzen 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:
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 benannt links. 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 der linken Seite des übergeordneten Containers zu platzieren.
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!