如何在第一个段落内的图像周围将文本包装到不同的段落（ <p> 标签）。（使用CKeditor插件输入内容）

Question

I am using CKEDITOR to input content. 我正在使用CKEDITOR输入内容。 Whenever user sets image with property right. 每当用户设置具有属性权限的图像时。 There is a blank space coming up. 出现空白。 I am having an image inside a 我在内部有图像

tag. 标签。 My structure is like 我的结构就像

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

I want to wrap the paragraph 2 to fill up the white space created by image on paragraph 1. Is this possible. 我想将第2段换行以填充第1段中图像创建的空白。这是否可能。

My html looks like this 我的HTML看起来像这样

I want to make it look like this 我想让它看起来像这样

Here is the actual code snippet 这是实际的代码片段

    <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

Float right for the image will do. 向右浮动图片即可。

or 要么

Try switching the image first before the text. 尝试先在文字之前切换图像。 follow as bellow 跟随波纹管

see this one: https://jsfiddle.net/xeqncj9h/1/ 看到这个： https : //jsfiddle.net/xeqncj9h/1/

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

Answer 2

Just give style to img tag. 只需给img标签添加样式即可。 Also, write your paragraph content after img tag so it can wrap around the image. 另外，将段落内容写在img标签之后，以便可以环绕图像。

CSS Code- CSS代码

img{
    float: right;
}

You can also try this JSFiddle 您也可以尝试此JSFiddle

Answer 3

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

Add align="right" also can achieve our effect 添加align =“ right”也可以达到我们的效果

"hspace" and "vspace" let us add more space between img and text. “ hspace”和“ vspace”使我们可以在img和文本之间添加更多空间。

Answer 4

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

Thank you all for your effort. 谢谢大家的努力。 I found that the issue was there in the CSS. 我发现CSS中存在问题。 there was overflow: hidden; 有overflow: hidden; property defined for the <p> tag. 为<p>标记定义的属性。 Commenting it has solved the problem. 评论它已经解决了问题。

如何在第一个段落内的图像周围将文本包装到不同的段落（ <p> 标签）。（使用CKeditor插件输入内容）

问题描述

5 个解决方案

解决方案1
1 2018-10-05 05:06:02

or 要么

HTML: HTML：

解决方案2
1 2018-10-05 05:09:11

解决方案3
1 2018-10-05 05:16:56

解决方案4
1 2018-10-05 05:30:47

解决方案5
1 已采纳 2018-10-24 04:40:14

如何在第一个段落内的图像周围将文本包装到不同的段落（ <p> 标签）。 （使用CKeditor插件输入内容）

问题描述

5 个解决方案

解决方案1 1 2018-10-05 05:06:02

or 要么

HTML: HTML：

解决方案2 1 2018-10-05 05:09:11

解决方案3 1 2018-10-05 05:16:56

解决方案4 1 2018-10-05 05:30:47

解决方案5 1 已采纳 2018-10-24 04:40:14

如何在第一个段落内的图像周围将文本包装到不同的段落（ <p> 标签）。（使用CKeditor插件输入内容）

解决方案1
1 2018-10-05 05:06:02

解决方案2
1 2018-10-05 05:09:11

解决方案3
1 2018-10-05 05:16:56

解决方案4
1 2018-10-05 05:30:47

解决方案5
1 已采纳 2018-10-24 04:40:14