或

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

向右浮动图片即可。

或

尝试先在文字之前切换图像。跟随波纹管

查看此内容：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>

Answer 2

只需为img标签赋予样式。另外，在img标记后写上段落内容，以便可以环绕图像。

CSS代码-

img{
    float: right;
}

您也可以尝试此JSFiddle

Answer 3

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

添加align =“ right”也可以达到我们的效果

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

感谢大家的努力。我发现CSS中存在问题。为overflow: hidden;标签定义了<p>属性。评论它已经解决了问题。

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

5 个答案:

或

HTML：

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

5 个答案:

或

HTML：

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