围绕着浮动环绕文字

你好我正在创建一个页面，我似乎无法得到一些工作。我在段落末尾有一张图片，而在CSS中，这是浮动的。我无法将图像移动到段落的一部分，然后使文本环绕它。 JSFIDDLE 围绕着浮动环绕文字

HTML

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

CSS

img{ 
    float:right; 
}

确保检查出的jsfiddle因为它有我想要什么更好的代表性。

来源

2015-04-17 Jace Bayless

为了清楚起见，您希望图像位于页面的右下角，文字环绕它而不是出现在最后一行文字下方的图像。 –

@Marc正确，右下角图像底部，文字底部。如果继续混淆，我可能会显示一张图片 –

这不是一件容易的事情，JS必须参与 - https://github.com/gilly3/lowFloat – Stickers

您需要将浮动权限文本上方的图像移动到该工作方式。

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

    TEXT GOES HERE 
</p>

来源

2015-04-17 13:24:05 Aaron

但是文字非常长，我希望它处于最底层。这是否仍然有效？你可以在http：// repmofbla看到我的意思。COM/SimmonsRedone/biographyHTML.html。 –

HTML从上到下按照基本的堆叠顺序工作，所以在文本下方的图像中添加一个“float：right;”它会使其向右浮动，但图像下方没有任何东西向上移动进入那个空的空间。 – Aaron

但是，您可以将图像放在文本末尾前几个段落 – Aaron

必须要么在图像移动到前面或外移动它：

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

或

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

    TEXT GOES HERE 
</p>

来源

2015-04-17 13:25:58 mohamedrias

-1

将一个<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; 
}

来源

2015-04-17 13:48:07

div里面的段落不是语义的，很不好回答:( – Aaron

语义抛开，图片还是不在OP所在的地方想要它和文本不包裹它... –

亚伦是正确的，图像将不得不超出文字。如果是长的，你总是可以做一个

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

不知道这是犹太与编码，但它的工作原理。

来源

2015-04-17 20:55:02

围绕着浮动环绕文字

回答

相关问题