Как обернуть текст внутри разных абзацев вокруг изображения внутри первого абзаца (тег <p>).(Контент вводится с помощью плагина CKeditor)

Question

Я использую CKEDITOR для ввода контента.Всякий раз, когда пользователь устанавливает изображение с правом собственности.Приближается пустое пространство.У меня есть изображение внутри тега

.Моя структура выглядит как

<p> some text
    <img alt="" src="M.jpg" style="float:right;">
</p>
<p> paragraph 2</p>

Я хочу обернуть абзац 2, чтобы заполнить пустое пространство, созданное изображением в абзаце 1. Возможно ли это.

Мой HTML выглядит так

Я хочу, чтобы это выглядело так

Вот фактический фрагмент кода

    <p>Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups under<img alt="" src="/media/uploads/2018/09/27/sufs5o_fWCbPPM.jpg" style="float:right; height:1080px; width:420px">Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. .</p>

<p>s settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.Enter each item on a new line, choose the amount of groups unders settings, and click the button to generate your randomized list. Don't like the first team? Just click again until you do.Fairly pick teams without bias. No need to draw names out of a hat. No need to do a grade school style draft or put hours of thought into the most balanced teams. The most fair dividing method possible is random.</p>

Answer 1

Спасибо всем за ваши усилия.Я обнаружил, что проблема была в CSS.для тега <p> определено свойство overflow: hidden;.Комментирование это решило проблему.

Answer 2

div.floatright {
    margin: 0 0 0.5em 0.5em;
    position: relative;
    clear: right;
    float: right;
}

.floatright {
    float: right;
    clear: right;
    position: relative;
    margin: 0.2em 0 0.8em 1.4em;
}

<div style="text-align:justify;margin:6px">
<div class="floatright">
<img src="//upload.wikimedia.org/wikipedia/commons/thumb/c/c7/Mandala1_detail.jpg/150px-Mandala1_detail.jpg" width="150" height="173">
</div>
<p>
El arte budista tiene su origen en el subcontinente indio (actuales India, Bangladés, Nepal y Pakistán) en los siglos posteriores a la vida de Siddhartha Gautama, el Buda histórico, entre los siglos vi y v a. C. Más tarde, gracias al contacto con otras culturas, logró evolucionar y difundirse por el resto de Asia y el mundo.

Una primera etapa, llamada preicónica, se sitúa antes del siglo i d. C. y se caracteriza por no recurrir a representaciones directas de Siddhartha Gautama como el Buda Śākyamuni o de los budas míticos que se suponen existieron en eras pasadas. La etapa siguiente, icónica, tiene por el contrario a la imagen humana del Buda y los budas del pasado, del futuro y de otros universos como símbolo central de sus obras de arte.

Desde entonces, el arte budista se diversificó y evolucionó para adaptarse a las nuevas regiones en las que comenzaba a sumar adeptos. Se expandió hacia el este y el norte a través de Asia Central, para formar lo que luego fue clasificado como arte budista del norte —en contraposición al arte budista del sur, que surgiría en el sudeste de Asia. En India, el arte budista floreció e incluso llegó a influir en el desarrollo del arte hindú, hasta que el budismo casi desapareció alrededor del siglo x, con la expansión del hinduismo y el islam.
</p>
<p>
El arte budista tiene su origen en el subcontinente indio (actuales India, Bangladés, Nepal y Pakistán) en los siglos posteriores a la vida de Siddhartha Gautama, el Buda histórico, entre los siglos vi y v a. C. Más tarde, gracias al contacto con otras culturas, logró evolucionar y difundirse por el resto de Asia y el mundo.

Una primera etapa, llamada preicónica, se sitúa antes del siglo i d. C. y se caracteriza por no recurrir a representaciones directas de Siddhartha Gautama como el Buda Śākyamuni o de los budas míticos que se suponen existieron en eras pasadas. La etapa siguiente, icónica, tiene por el contrario a la imagen humana del Buda y los budas del pasado, del futuro y de otros universos como símbolo central de sus obras de arte.

Desde entonces, el arte budista se diversificó y evolucionó para adaptarse a las nuevas regiones en las que comenzaba a sumar adeptos. Se expandió hacia el este y el norte a través de Asia Central, para formar lo que luego fue clasificado como arte budista del norte —en contraposición al arte budista del sur, que surgiría en el sudeste de Asia. En India, el arte budista floreció e incluso llegó a influir en el desarrollo del arte hindú, hasta que el budismo casi desapareció alrededor del siglo x, con la expansión del hinduismo y el islam.
</p>
</div>

Answer 3

Просто задайте стиль тегу img.Кроме того, напишите свое содержание абзаца после тега img, чтобы оно могло обтекать изображение.

Код CSS -

img{
    float: right;
}

Вы также можете попробовать это JSFiddle

Answer 4

<img align="right"  hspace="3px" vspace="3px" src="M.jpg"" >

Добавление align = "right" также может обеспечить наш эффект.

"hspace" и "vspace" позволят нам добавить больше пространства между img и текстом.

Answer 5

Float вправо для изображения будет делать.

или

Попробуйте сначала переключить изображение перед текстом.следуйте как ниже

см. это: https://jsfiddle.net/xeqncj9h/1/

HTML:

<!DOCTYPE html>
<html>
<head>
<style>
img {
    float: right;
}
</style>
</head>
<body>

<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iusto totam, excepturi molestias ab est eos, quam cumque, animi culpa numquam quaerat voluptatibus et voluptate quia omnis nemo ex qui. Lorem ipsum dolor sit amet, consectetur adipisicing elit. Magni iusto totam, excepturi molestias ab est eos, quam cumque, animi culpa numquam quaerat voluptatibus et voluptate quia omnis nemo ex qui.</p>

<p class=""><img src="https://via.placeholder.com/350x150" >
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Phasellus imperdiet, nulla et dictum interdum, nisi lorem egestas odio, vitae scelerisque enim ligula venenatis dolor. Maecenas nisl est, ultrices nec congue eget, auctor vitae massa. Fusce luctus vestibulum augue ut aliquet. Mauris ante ligula, facilisis sed ornare eu, lobortis in odio. Praesent convallis urna a lacus interdum ut hendrerit risus congue. Nunc sagittis dictum nisi, sed ullamcorper ipsum dignissim ac. In at libero sed nunc venenatis imperdiet sed ornare turpis. Donec vitae dui eget tellus gravida venenatis. Integer fringilla congue eros non fermentum. Sed dapibus pulvinar nibh tempor porta. Cras ac leo purus. Mauris quis diam velit.</p>

</body>
</html>