html - 如何右对齐div内的固定位置div

Question

我的代码是这样的。

<div class="outer">
    <div class="inner">some text here
    </div>
</div>

CSS:

.outer {
    max-width:1024px;
    background-color:red;
    margin:0 auto;
}
.inner {
    width:50px;
    border:1px solid white;
    position:fixed;
}

内部 div，默认位于 left，需要相对 right w.r.t 定位。外部 div 而不是页面本身。

如果我将它设置为 right:0px;，那么它会将 0px 从浏览器右侧对齐，而不是外部 div正确的。

注意:我的外部 div 不是固定宽度；它根据屏幕分辨率进行调整。这是一个响应式网站设计。

Answer 1

您可以使用容器 div:

<div class="outer">
    <div class="floatcontainer">
        <div class="inner">some text here</div>
    </div>
</div>

然后用它来处理float，并让它的 child position: fixed

.outer {
    width:50%;
    height:600px;
    background-color:red;
    margin:0 auto;
    position: relative;
}
.floatcontainer {
    float: right;
}
.inner {
    border:1px solid white;
    position:fixed;
}
.floatcontainer, .inner{
    width: 50px;
}