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;
}

将文本环绕向右浮动

4 个答案: