Home >Web Front-end >CSS Tutorial >How Can I Make Text Wrap Around an Image Using HTML and CSS?

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

Susan Sarandon
Susan SarandonOriginal
2024-12-14 11:39:11324browse

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

Wrapping Text Around an Image Using HTML/CSS

Question:

Can you design a block of text to wrap around an image like this:

[Image of text wrapping around an image]

Answer:

Yes, this is possible by floating the image container.

HTML:

<div>

CSS:

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

Explanation:

  • The #container div defines the boundaries of the text and image.
  • The #floated div contains the text that will wrap around the image.
  • The float: left property on the #floated div makes it float to the left of the container.
  • The width property on the #floated div defines how wide the text will be.

Live Example:

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

The above is the detailed content of How Can I Make Text Wrap Around an Image Using HTML and CSS?. For more information, please follow other related articles on the PHP Chinese website!

Statement:
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn