How to make text wrap around an image?

Question

css

This layout, as I understand it, does not have a common container, but all blocks are aligned to the left. How can I wrap the image with text so that the vertical alignment of the blocks does not fall off?
float helps here, but then again, when the screen narrows, the vertical alignment of the blocks themselves is violated.

Answer 1

Use float.

<img src="<путь-к-картинке>" alt="image">
<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Dicta unde, quisquam voluptates libero praesentium, asperiores ratione ea deserunt at quaerat animi quo! Mollitia iusto nisi obcaecati alias similique, doloribus, eos.</p>

And in css:

img {
float: left;
}

Doing so is right. The float property creates a float. We specified the value left , which means the image will be on the left. You can also specify a right value (a complete list of values ​​can be found in the property's documentation). That is, in fact, the text wraps around the image on the right, and with it, the element following it (the rest of the elements following the text behave normally). And, in order to remove the wrapping of the next element, it must be assigned the clear property with a value of both . This will remove the wrap. I hope it helped))