将“浮动”内容放在文本段落的右下角

Question

以下是代码：http://jsfiddle.net/ym2GQ/

p {
  background: lightblue;
}

.end {
  background: orange;
  float: right;
  display: inline;
}

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam adipiscing orci at tortor bibendum suscipit et eu eros. Nunc congue, ante nec egestas fringilla, ipsum est porttitor leo, tempus lacinia augue erat posuere elit.
</p>
<div class="end">$$</div>

我希望浮动$$位于其前的段落中。它应该与段落中的持续线对齐，但它应该浮动到右边。

如何做到这一点？请注意，我必须在我不能浮动div元素之前的段落元素的约束下解决这个问题。我可以用DIV元素做任何我想做的事。如有必要，我还可以将DIV元素移动到代码的其他部分。

Answer 1

用SPAN替换DIV，移动P内部似乎有效。您可以选择将SPAN设置为内联块，具体取决于内容。

如果您在文本之前放置SPAN，它将接近顶部。如果你把它放在后面，它将在底部。

demo

Answer 2

根据段落右下角提供您想要的新信息，请参阅此实例：http://jsfiddle.net/AGEus/1/

简而言之：

1. 将<div>设为<span>并将其作为该段落的子项。
2. 制作段落position:relative（以便建立自己的坐标系）
3. 在右侧的段落中添加一些填充，以使.end的内容不会与文本重叠。
4. 绝对将.end的位置和大小放在段落的右下角。

HTML：

<p>
  Lorem ipsum dolor sit amet, consectetur adipiscing elit...
  <span class="end">$$</span>
</p>

CSS：

p      { position:relative; padding-right:2em }
p .end { position:absolute; right:0; bottom:0; width:2em }
​

Answer 3

好的，玩了你的代码并找到了解决方案。您需要设置p标签以显示：内联并将div浮动到右侧。 I updated your fiddle for you.

Answer 4

如果我理解你的话，你希望div显示在你的段落上。 为此，您可以将div设置为绝对位置，并设置顶部，左侧，右侧，底部的确切位置。