lamo4ok
@lamo4ok
Программист

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

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

<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>

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

5bebdeb8c69a1287324375.png

Но нам нужно, чтобы картинку обтекал не только первый, но и остальные параграфы. При этом, каждый параграф должен быть обернут именно в тег <p>.
  • Вопрос задан
  • 1254 просмотра
Решения вопроса 3
natojezlo
@natojezlo
p{display:block; float:left;} не?

в чем проблема обернуть картинку в див вместо p
Ответ написан
картинку выше дива и ей float left
Ответ написан
azerphoenix
@azerphoenix
Java Software Engineer
нашел этот код в одной из дефолтных тем ВП.
/* 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; }


Это чтобы изображения корректно обтекались в области контента при редактировании через редактор...
Ответ написан
Пригласить эксперта
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Войти через центр авторизации
Похожие вопросы