将内部DIV定位在包含DIV之外 - 内部DIV大小未知 - 需要CSS解决方案

Question

如何将绝对定位的DIV定位在相对定位的DIV中，其中内部DIV应出现在外部DIV的左上角。

我的问题是内部DIV的大小仍然未知。我希望内部div的整个宽度位于外部DIV之外的左上侧，包括外部DIV可能具有的任何填充。

以下是我想要实现的目标：

这可能与jQuery有关，但我想要一个CSS解决方案。它只能在webkit浏览器上运行，因此不需要Internet Explorer支持。谢谢

Answer 1

您只能使用css实现此目的：

<div class="outer">
 <div class="inner">
 </div>
</div>

诀窍是应用right: 100%;

.outer {
    background: #333;
    width: 100px;
    height: 100px;
    position: relative;
    margin: 0 auto;
}

.inner {
    position: absolute;
    background: red;
    width: 50px;
    height: 50px;
    top: 0;
    right: 100%;
}

示例：http://jsfiddle.net/H7QAe/