html代码整体右移的快捷键,关于html：将文字右移

您好，我正在创建一个页面，但似乎无法正常工作。 我在段落末尾有一张图片，在CSS中这是浮动的。 我无法使图像向上移动成为段落的一部分，然后使文本环绕它。 JSFIDDLE

的HTML

TEXT GOES HERE

   

的CSS

img{

float:right;

}

确保检查JSfiddle，因为它可以更好地表示我想要的内容。

为了清楚起见，您希望图像位于页面的右下角，并带有环绕的文本，而不是图像显示在文本的最后一行下方。

@Marc正确，在图像的右下角和文本的底部。如果混乱继续存在，我可能会显示图片

这将不是一件容易的事，必须包含JS-github.com/gilly3/lowFloat

如某些评论中所述，必须将图像移动到文本中以使其环绕。使用当前的CSS无法做到这一点，甚至JavaScript也需要大量工作(请参阅@sdcr的评论)。如果此页面或多或少是静态的(即使从DB / CMS加载)，则将图像移动到文本中将变得更加容易，直到您可以根据需要包装文本为止。在自动化网站中，由于很难实现，因此您几乎看不到这种布局要求。

@sdcr jQuery插件可以解决问题，并且还演示了所涉及的复杂性。

您需要将图像移动到文本上方，以使浮动权利以这种方式工作。

   

TEXT GOES HERE

但是文本真的很长，我希望它在底部。 这仍然有效吗？ 您可以在repmofbla.com/SimmonsRedone/biographyHTML.html上看到我的意思的实时示例。

HTML按从上到下的基本堆叠顺序工作，因此图像在文本下方并添加float: right;将使其向右浮动，但是图像下方没有任何内容可向上移动到该空白区域。

但是，您可以将图像放在文本末尾几段之前

这样做的问题是，我将使用PHP从数据库中加载文本，因此我不确定我是否会相信我的编程技能来正确放置该xD

那么那是一个大问题，不，您无法使用css以任何其他方式执行此操作

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

   

TEXT GOES HERE

要么

TEXT GOES HERE

亚伦(Aaron)是正确的，图片必须在文字上方。 如果时间长，您可以随时执行

TEXT GOES HERE

 

TEXT GOES HERE

不知道这是否符合编码要求，但是否有效。

在您的段落中放置，并在其中保留文本。 然后以float: left和图像float: right

如下所示：

HTML代码示例JSFiddle

THIS IS A LOT OF TEXT

........................

.........................

   

的CSS

img{

float:right;

width:150px;

}

p {

width:100%;

height: auto;

}

div{

width:70%;

height:auto;

float: left;

}

段落内的div不是语义，答案很差:(

除了语义，图像仍然不是OP想要的位置，并且文字也没有环绕它...