CSS wickeln Text um das Bild ein
Beispiel 1:
Wir werden mit dem Schreiben von Code richtig schreiben und ihn in Visual Studio -Code ausführen. Zunächst erstellen wir eine neue Datei und wählen HTML als Sprache aus. Jetzt setzen "!Und klicken. Alle notwendigen HTML -Tags können hier angezeigt werden. Wir müssen alle diese Tags nicht schreiben. Danach verwenden wir nur das Tag "Link" im "Kopf", um den Namen der CSS -Datei einzulegen, die wir mit dieser HTML -Datei verlinken möchten. In diesem Code haben wir zuerst die Überschrift und dann einen DIV mit dem Namen "Quadrat" eingestellt. In diesem „quadratischen“ Div haben wir ein weiteres DIV, in dem wir das Bild einfügen, indem wir das „IMG“ -Tag verwenden.
Nachdem Sie das Bild in die zweite DIV gestellt haben, schließen Sie diese Div. Wenn wir diesen Absatz abschließen und ihn schließen. Dann schließen wir das erste "Div" -Tag. Wir werden diesen Text um dieses Bild wickeln, das wir eingefügt haben. Zum Wickeln von Text gehen wir zur CSS -Datei, in der wir die Eigenschaft "Float" zum Wickeln verwenden werden.
Zunächst müssen wir den „Rand“ des Körpers auf „20px“ setzen und auch den gesamten Körper auf das „Zentrum“ ausrichten. Die Überschrift „H1“ wird auch mit „lila“ als „Farbe“ dieser Überschrift dekoriert. Wir verwenden die „Schriftfamilie“ und passen sie an „algerisch“ an. Dann verwenden wir die Eigenschaft „Float“ für das Bild, das wir in den HTML -Code eingefügt haben. Und setzen Sie diesen Eigenschaftswert "Float" auf "links", wie das Bild nach links. Wir passen auch den „Rand“ des Bildes an "4px" an. Die "Breite" und "Höhe" dieses Bildes sind "250px". Wir haben auch einen Absatz, also haben wir diesen Absatz auch festgelegt. Wir richten den Text des Absatzes aus und setzen ihn auf "Rechtfertigung". Wir setzen die "Schriftgröße" dieses Absatzes und passen ihn auf "20px" an. Die "Schriftfamilie" für diesen Absatz ist "Calibri".
Unten ist der Screenshot des obigen Code. Wir wickeln den Absatztext mit der Eigenschaft „Float“ in CSS um dieses Bild um dieses Bild um.
Beispiel # 2:
Wir verwenden den HTML -Code des obigen Beispiels für dieses Beispiel, aber dieses Mal setzen wir das Bild auf der rechten Seite, indem wir die Eigenschaft „Float“ verwenden. In diesem CSS-Code setzen wir den Rand des Körpers auf "20px", und die Eigenschaft "Text-Align" wird an das "Zentrum" angepasst, der an das "Zentrum" angepasst wird. Die "Farbe" ist für die Überschrift "grün" und die "Schriftfamilie" ist "algerisch". Verwenden Sie auch "Textdekoration" und legen Sie "Untersteuer" als Wert dieser Eigenschaft. Wir schweben das Bild auf die „rechts“, damit der Text des Absatzes auf der linken Seite dieses Bildes erscheint. Der "Rand" des "IMG" ist "5px".
Wir setzen auch die „Breite“ auf „190px“ und auch die „Höhe“ ist „90px“. Im Folgenden verwenden wir die Eigenschaft "Text-Align" für das „P“ und dieses „P“ beschreibt den Absatz. Wir setzen die Eigenschaft "Text-Align" auf das Schlüsselwort "Justify", und die Schriftgröße dafür ist auf "18px" festgelegt. Das "Times New Roman" wird als "Schriftfamilie" genutzt.
Sie können im Screenshot unten sehen, dass das Bild auf der rechten Seite aufgrund der Eigenschaft „Float“ angezeigt wird und der Text um dieses Bild gewickelt ist.
Beispiel # 3:
Wir werden hier zwei verschiedene Bilder verwenden. Wir setzen das erste Bild in den DIV und platzieren dann einen Absatz. Nach diesem Absatz fügen wir erneut ein Bild in eine andere DIV ein und fügen erneut einen Absatz unter diesem Bild hinzu. Wir werden den Text um beide Bilder im CSS -Code anpassen. Sehen Sie sich an, wie wir Text in CSS unten um beide Bilder wickeln werden.
Die Eigenschaft „Rand“ und „Text-Align“ für den Körper sind die gleichen wie in den obigen Beispielen. Die „Farbe“ wird diesmal für die Überschrift in „rot“ geändert. Die "Schriftfamilie" wird als "algerisch" ausgewählt und auch diese Überschrift "unterstreichen". Wir stellen die Eigenschaft "Float" für das erste Bild fest, indem wir den Namen der ersten Bildklasse erwähnen und die Eigenschaft "Float" auf die „Rechte“ setzen. Der „Rand“, den wir für das erste Bild verwenden, ist "5px". Wir verwenden auch die Eigenschaft „Breite“ und „Höhe“ und setzen beide auf „200px“.
Dann passen wir auch das zweite Bild an und „schweben“ dieses zweite Bild an die „linke“ und sein „Rand“ ist das gleiche wie wir für das erste Bild festgelegt haben. Jetzt "rechtfertigen" wir diesen Absatz und setzen seine Schriftgröße auf "17px". "Arial" wird als "Schriftfamilie" für "P" verwendet.
Zwei Bilder werden in der Ausgabe gerendert. Das erste Bild wird auf der „linken“ Seite gerendert und das zweite Bild wird auf der „rechten“ Seite des Ausgabebildschirms gerendert und der gesamte Text ist um beide Bilder gewickelt.
Beispiel Nr. 4:
In unserem letzten Beispiel haben wir einen Absatz und dann einen Div. In diesem Div -Container setzen wir auch ein Bild und einen Absatz ein. Sehen Sie sich nun an, wie wir all diese Absätze verwenden, das Bild anpassen und den Text auch um das Bild wickeln.
Wir verwenden "20px" "Margin" und "Center" -Werte für "Text-Align" für den Körper. Dann setzen wir die Farbe auf „Kastanienbranchen“ für die Kopfhöhe und die Schriftart, „algerische“ Schriftfamilie. Wir "unterstreichen" auch die Überschrift. Wir definieren die Eigenschaft "Float" für das Bild, indem wir den Namen der Bildklasse angeben und die Eigenschaft "Float" auf "links" festlegen. Für dieses Bild ist der "Rand", den wir verwenden, "5px". Die „Breite“ dieses Bildes lautet "300px" und seine "Höhe" beträgt "300px".
Jetzt wenden wir einige Eigenschaften auf den Absatz an, um ihn ansprechender zu gestalten. Wir setzen die "Farbe" des Textes des Absatzes auf "Schwarz". Wir setzen auch die ausgerichtete Eigenschaft des Textes auf "Rechtfertigung" und "18px" für die "Schriftgröße" fest. Wir passen auch die „Times New Roman“ „Schriftfamilie“ für den Absatz an.
Sie können feststellen, dass ein Absatz über dem Bild, einen Absatz unterhalb des Bildes, einen Absatztext auf der rechten Seite des Bildes befindet, und das Bild schwebt nach links. Der Text des Absatzes wickelt sich um dieses Bild, weil wir dies im CSS -Code festgelegt haben.
Abschluss
Der Fokus dieses Artikels liegt auf der Erklärung, wie Sie den Text in CSS um das Bild einwickeln können. Wir haben dieses Konzept in diesem Artikel ausführlich untersucht und erklärt, was Wickeltext ist und was wir tun sollten, um den Text um das Bild zu wickeln. Wir haben die Eigenschaft "Float" verwendet, um das Bild nach "links" oder "rechts" zu schweben und Text um dieses Bild zu wickeln. Wir haben hier auch mehrere Beispiele aufgenommen, in denen wir den Text um das Bild gewickelt haben, einschließlich der Ergebnisse aller Beispiele des Artikels. Ich hoffe.