How Can I Make Text Wrap Around an Image in HTML/CSS?

Text Wrapping Around Images in HTML/CSS

Question:

Can we create a text block that wraps around an image like the image provided?

Answer:

Absolutely! To achieve this effect, it is necessary to float the image container. Here's how to do it:

HTML Code:

<div>

CSS Code:

#container {
    width: 400px;
    background: yellow;
}

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

Result:

The container's fixed width (400px) and yellow background create a text block. The floated image (#floated) with a width of 150px and a red background is positioned on the left, allowing text to flow around it.

Interactive Example:

A live demonstration of this technique can be found on JSFiddle: http://jsfiddle.net/kYDgL/

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