将“浮动”内容放置在文本段落的右下角(Place 'floating' contents at the bottom right of a paragraph of text)

这里是代码： http : //jsfiddle.net/ym2GQ/

<!DOCTYPE html> <html> <head><title>Dollar</title> <style type="text/css"> p { background: lightblue; } .end { background: orange; float: right; display: inline; } </style> </head> <body> <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> </body> </html>

我希望浮动$$在它之前的段落内。它应该与段落中的持续行对齐，但它应该向右浮动。

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

Here is the code: 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> 
  
 
 
I want the floating $$ to be within the paragraph before it. It should align with the lasts line in the paragraph but it should be floated to right. 
How can this be done? Please note that I have to solve this problem under the constraint that I can not float the paragraph element that comes before the div element. I can do whatever I want with the DIV element though. I can also move around the DIV element to some other part of the code if necessary.
                最满意答案
                
                    
                         鉴于您希望在段落右下方显示的新信息，请参阅此实例： http ： //jsfiddle.net/AGEus/1/  
 
 简而言之：  
 
  使<div> a <span>并将其作为段落的子项。  
  使段落position:relative （以便它建立自己的坐标系）  
  在右侧的段落中放置一些填充，以便.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 }

Given your new information that you want it at the bottom right of the paragraph, see this live example: http://jsfiddle.net/AGEus/1/ 
 
In short: 
 
 Make the <div> a <span> and place it as a child of the paragraph. 
 Make the paragraph position:relative (so that it establishes its own coordinate system) 
 Put some padding in the paragraph on the right side so that the contents of .end won't overlap the text. 
 Absolutely position and size the .end to the bottom right of the paragraph. 
 
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 }