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/

Answer 2

如果您尝试将对象排成一行，只需删除left: -100%。

http://jsfiddle.net/dkv9W/3/

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

2 个答案: