html - 将 'floating'内容放在一段文字的右下方

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>

我希望 float $$ 位于它之前的段落中。它应与段落中的最后一行对齐，但应向右浮动。

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

Answer 1

在段落的右下角提供您想要的新信息，请参阅此实例: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 }
​