如何在第一个段落内的图像周围将文本包装到不同的段落（ <p> 标签）。 （使用CKeditor插件输入内容）
[英]How to wrap text inside to different paragraphs around image inside the first paragraph (<p> tag). (Content is inputted using CKeditor Plugin)
问题描述
我正在使用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>
5 个解决方案
解决方案1
1 2018-10-05 05:06:02
向右浮动图片即可。
要么
尝试先在文字之前切换图像。 跟随波纹管
看到这个： 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>
解决方案2
1 2018-10-05 05:09:11
解决方案3
1 2018-10-05 05:16:56
<img align="right" hspace="3px" vspace="3px" src="M.jpg"" >
添加align =“ right”也可以达到我们的效果
“ hspace”和“ vspace”使我们可以在img和文本之间添加更多空间。
解决方案4
1 2018-10-05 05:30:47
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>
解决方案5
1 已采纳 2018-10-24 04:40:14
谢谢大家的努力。 我发现CSS中存在问题。 有overflow: hidden; 为<p>标记定义的属性。 评论它已经解决了问题。
如何将带有 span 标签的特定文本包裹在<p>标签</p>
声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.