将文本环绕向右浮动

Question

你好，我正在创建一个页面，我似乎无法得到一些工作。 我在一个段落的末尾有一个图像，而在css中它是向右浮动的。 我无法让图像向上移动成为章节的一部分然后使文本环绕它。 的jsfiddle

HTML

<p>
   TEXT GOES HERE
   <img src="src/src.jpg">
</p>

CSS

img{
   float:right;
}

请务必查看JSfiddle，因为它可以更好地表达我想要的内容。

Answer 1

您需要将图像上方的图像移动到浮动右侧才能以这种方式工作。

<p>
   <img src="src/src.jpg">

   TEXT GOES HERE
</p>

Answer 2

您必须将图像移到前面或将其移到外面：

<p>
   <img src="src/src.jpg">
   TEXT GOES HERE
</p>

要么

   <img src="src/src.jpg">
<p>

   TEXT GOES HERE
</p>

Answer 3

亚伦是正确的，图像必须超出文本。 如果它很长，你总能做到

<p>
  TEXT GOES HERE<br>
  <img src="src/src.jpg">
  TEXT GOES HERE
</p>

不确定这是否与编码有关，但它有效。

Answer 4

在段落中放入一个<div>并将文本保留在其中。 然后制作float: left ，你的图像float: right

如下所示：

HTML代码示例JSFiddle

<p>
    <div> THIS IS A LOT OF TEXT 
           ........................
           .........................
    </div>
    <!-- MOVE THIS IMAGE UP SO IT'S NOT BELOW AND WRAP TEXT AROUND IT -->
    <img src="..Troll-face.png" />
</p>

CSS

img{
    float:right;
    width:150px;
}

p {
    width:100%;
    height: auto;
}

div{
    width:70%;
    height:auto;
    float: left;
}