Поместите «плавающее» содержимое в нижнем правом углу абзаца текста

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

Замена DIV на SPAN и перемещение внутрь P, похоже, работает. При желании вы можете установить для параметра SPAN значение inline-block в зависимости от содержимого.

Если вы поместите SPAN перед текстом, он будет в верхней части. Если вы поставите его после, он будет внизу.

демо

Answer 2

Учитывая вашу новую информацию, которую вы хотите получить в правом нижнем углу абзаца, посмотрите этот пример в реальном времени: http://jsfiddle.net/AGEus/1/

Короче говоря:

1. Сделайте <div> a <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 для отображения: inline и плавать div вправо. Я обновил вашу скрипку для вас.

Answer 4

Если я вас правильно понял, вы хотите, чтобы div отображался над вашим абзацем. Для этого вы можете просто установить div в абсолютное положение и установить точное положение сверху, слева, справа, снизу.