html - 将绝对定位元素的右侧移动到其父元素的左侧

Question

问题

我在另一个容器中有一个容器。给定外容器上的规则 display: inline-block;。我希望内部容器的内容结束，而外部容器的内容开始。我尝试使用 left: -100%; 但自然地它只会将内容移动到外部容器的宽度。用例:内部元素将是悬停时显示在左侧对齐的工具提示。

如何在不使用 JavaScript 的情况下使两个元素彼此对齐且不重叠？

HTML

<div>
    Short content
    <div>This is very long test sentence.</div>
</div>

CSS

div {
    position: relative;
    display: inline-block;
    margin: 40px 200px;
    background: rgba(123, 234, 345, 0.7);
}

div > div {
    position: absolute;
    top: 20px;
    left: -100%;
    margin: 0;
    background: rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

jsFiddle 演示

Demo

Answer 1

尝试使用 right: 100%; 而不是 left: -100%;。像这样:

http://jsfiddle.net/dkv9W/1/