在文本末尾放置绝对框（灵活的文本长度）

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

如果将位置设置为relative，则div将相对于其原始位置放置。 例如在你身边的左边100px

如果将位置设置为绝对值，则div将相对于其父级（具有相对或绝对定位的下一个父级）放置。 例如从父母的左角开始100px

最重要的是，div不再是文档流程的一部分。所以其他元素可以与它重叠。

浮动元素也是如此。这里使用下一个可用位置。

一般来说，设置绝对定位和浮动是没有意义的。

Answer 2

这可能有效：

<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;
}

小提琴参考：http://jsfiddle.net/audetwebdesign/DWe8B/

备注

（1）我在文本行中嵌套了弹出框。我可以解决这个问题 问题是弹出窗口继承了父窗口的宽度，所以框 除非你指定宽度，否则可能很窄。