Heim > Web-Frontend > CSS-Tutorial > Wie kann ich mithilfe von HTML und CSS Text um ein Bild fließen lassen?

Wie kann ich mithilfe von HTML und CSS Text um ein Bild fließen lassen?

Susan Sarandon
Freigeben: 2024-12-14 11:39:11
Original
322 Leute haben es durchsucht

How Can I Make Text Wrap Around an Image Using HTML and CSS?

Mit HTML/CSS Text um ein Bild wickeln

Frage:

Können Sie entwerfen? ein Textblock, der um ein Bild wie folgt gewickelt wird:

[Bild eines Texts, der um ein gewickelt wird Bild]

Antwort:

Ja, das ist möglich, indem man das Bild schweben lässt Container.

HTML:

<div>
Nach dem Login kopieren

CSS:

#container{
    width: 400px;
    background: yellow;
}
#floated{
    float: left;
    width: 150px;
    background: red;
}
Nach dem Login kopieren

Erklärung:

  • Das #container div definiert die Grenzen des Textes und Bild.
  • Das #floated div enthält den Text, der das Bild umschließt.
  • Die float: left-Eigenschaft des #floated div sorgt dafür, dass es links vom Container schwebt.
  • Die width-Eigenschaft des #floated div definiert, wie breit der Text sein wird.

Live Beispiel:

[JSFiddle](http://jsfiddle.net/kYDgL/)

Das obige ist der detaillierte Inhalt vonWie kann ich mithilfe von HTML und CSS Text um ein Bild fließen lassen?. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!

Quelle:php.cn
Erklärung dieser Website
Der Inhalt dieses Artikels wird freiwillig von Internetnutzern beigesteuert und das Urheberrecht liegt beim ursprünglichen Autor. Diese Website übernimmt keine entsprechende rechtliche Verantwortung. Wenn Sie Inhalte finden, bei denen der Verdacht eines Plagiats oder einer Rechtsverletzung besteht, wenden Sie sich bitte an admin@php.cn
Neueste Artikel des Autors
Beliebte Tutorials
Mehr>
Neueste Downloads
Mehr>
Web-Effekte
Quellcode der Website
Website-Materialien
Frontend-Vorlage