Размещение абсолютного поля в конце текста (гибкий по длине текста)

Question

Я хочу поместить абсолютное всплывающее окно в конце текстовой ссылки.

HTML

<div style="float:left;">Hello World</div><div class="box">BOX</div> 

CSS

.box 
{ 
    float:left; 
    border-color:#000; 
    border-style:solid; 
    border-width:1px; 
    width:80px; 
    height:80px; 
    text-align:center; 
} 

http://jsfiddle.net/7N6ye/1/

Он отлично работает только тогда, когда коробка относительна. Когда я установил position:absolute на коробке, это выглядит как

http://jsfiddle.net/7N6ye/3/

Любые идеи? В конце концов, у меня будет список ссылок, каждый из которых имеет разную длину текста. (И каждый бокс будет всплывать в конце текста).

Answer 1

Это может работать:

<div class="box">Hello World<div>BOX</div></div> 

с CSS:

.box { 
    position: relative; 
    border: 1px solid red; 
    float: left; 
} 
.box div 
{ 
    position:absolute; 
    top: 0; 
    left: 100%; 
    border-color:#000; 
    border-style:solid; 
    border-width:1px; 
    width:80px; 
    height:80px; 
    text-align:center; 
    display: inline-box; 
} 

Fiddle Ссылка: http://jsfiddle.net/audetwebdesign/DWe8B/

Примечание

(1) Я вложенный всплывающее окно в текстовую строку. Я могу обойти это.
проблема заключается в том, что всплывающее окно наследует ширину родителя, поэтому поле может быть довольно узким, если вы не укажете ширину.

Answer 2

Если вы установите положение относительно, то div поместится относительно его исходного положения. , например. 100px влево, где вы находитесь

Если вы установите абсолютное положение, div поместится относительно его родителя (следующего родителя с относительным или абсолютным позиционированием). , например. 100px от левого угла родителя

Кроме того, div больше не является частью потока документов. Таким образом, другие элементы могут перекрываться с ним.

То же самое верно для плавающих элементов. Здесь используется следующая доступная позиция.

В общем, нет смысла устанавливать абсолютное позиционирование, а также поплавок.