Place 'floating' contents at the bottom right of a paragraph of text

问题

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.

回答1:

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 }

回答2:

Replacing the DIV with a SPAN, and moving the inside the P seems to work. You can optionally set the SPAN to inline-block depending on the contents.

If you put the SPAN before the text, it will be near the top. If you put it after, it will be at the bottom.

demo

回答3:

Ok, played with your code and found the solution. You need to set the p tag to display: inline and float the div to the right. I updated your fiddle for you.

回答4:

If I understand you right, you want that the div is displayed over your paragraph. For that you could just set the div to position absolute and set the exact position with top, left, right, bottom.

来源：https://stackoverflow.com/questions/9320017/place-floating-contents-at-the-bottom-right-of-a-paragraph-of-text

标签

html

css

css-float