Как сделать обтекание картинки несколькими параграфами текста?

Question

[Станислав]

Как сделать обтекание картинки одним параграфом знают все. А как сделать обтекание картинки несколькими параграфами? Пример кода:

<div>
<img src="1.png">
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div>

Если мы встроим тег картинки в какой-либо параграф вот так:

<div>
<p><img src="1.png">Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div>

то там мы сможем сделать обтекание картинки как описано по ссылке выше, но только текстом данного параграфа. Нас ждет примерно такой результат:



Но нам нужно, чтобы картинку обтекал не только первый, но и остальные параграфы. При этом, каждый параграф должен быть обернут именно в тег <p>.

Comments

[Lynn «Кофеман»]

Первый код и float left у картики работают уже 20 лет

[Lynn «Кофеман»]

https://www.w3.org/TR/CSS2/visuren.html#img-float2p

Answer 1

[азаза]

p{display:block; float:left;} не?

в чем проблема обернуть картинку в див вместо p

Comments

[Станислав]

А можно рабочий код вашего решения?

[азаза]

<div class="block">
<div><img src="1.png"></div>
<div>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
<p>Lorem ipsum ...</p>
</div>
</div>

.block{display:grid; grid-template columns:100px/*размер вашей картинки по x*/ 1fr;
grid-column-gap:10px; /*размер отступа*/}

[Станислав]

Извините, вопрос не стоит и выеденного яйца, я почему-то не заметил flex в верстке выше и решил, что чего-то не знал в верстке :-)

Answer 2

[Александр Алексеев]

картинку выше дива и ей float left

Comments

[Станислав]

Извините, вопрос не стоит и выеденного яйца, я почему-то не заметил flex в верстке выше и решил, что чего-то не знал в верстке :-)

Answer 3

[Орхан Гасанлы]

нашел этот код в одной из дефолтных тем ВП.

/* default styles for images alignment */
img.alignright { float: right; margin: 0 0 1em 1em; }
img.alignleft { float: left; margin: 0 1em 1em 0; }
img.aligncenter { display: block; margin-left: auto; margin-right: auto; }
.alignright { float: right; }
.alignleft { float: left; }
.aligncenter { display: block; margin-left: auto; margin-right: auto; }

Это чтобы изображения корректно обтекались в области контента при редактировании через редактор...

Comments

[Станислав]

Извините, вопрос не стоит и выеденного яйца, я почему-то не заметил flex в верстке выше и решил, что чего-то не знал в верстке :-)