How to realize the mode of text surrounding pictures on the website

Prepare a picture and create a blank html file

How html+css achieves the effect of text surrounding pictures

The content of the html file is shown in the figure below. The html contains a picture and the corresponding description paragraph

How html+css achieves the effect of text surrounding pictures

Add a head tag to the html, and define the style in the tag.

<style>

     p {border:1px solid red;}

     img {float:left; margin:0 5px 5px 0;}

</style>

How html+css achieves the effect of text surrounding pictures

Open the above html file with chrome browser, you can see the text wrapping effect, as shown in the figure below

How html+css achieves the effect of text surrounding pictures

Since the sentence we used when importing pictures is <img src="Penguins.jpg" style="width: 50%;height:auto"/>, this indicates that the size of the picture will be adjusted with the size of the browser window And it is automatically adjusted. So when the browser window is zoomed in or out, the surround effect will change accordingly.

How html+css achieves the effect of text surrounding pictures

How html+css achieves the effect of text surrounding pictures

If you want to clear the text wrapping effect, just delete the float: letf style definition.

How html+css achieves the effect of text surrounding pictures

How html+css achieves the effect of text surrounding pictures

【 Go Back 】 | 【 Print 】