如何在div中右对齐固定位置div

问题描述:

我的代码是这样的。

<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 ,默认情况下位于的位置,需要相对于 wrt进行定位外部 div 而不是页面本身。

The inner div, which is positioned left by default, needs to be positioned against the right w.r.t. the outer div and not to the page itself.

如果我将其设置为 right:0px; ,然后它从浏览器的右边对齐 0px ,而不是外部的 div 是的。

If I style it to be right:0px;, then it aligns 0px from the browser's right, not the outer div's right.

注意:我的外部 div 的宽度不是固定的;它根据屏幕分辨率进行调整。

NOTE : My outer div is not fixed width; it adjust as per screen resolution. It's a responsive website design.

您可以使用容器div:

You could use a container div:

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

然后用它来处理 float ,并将其子级设为:固定

Then use that to handle the float, and make its 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;
}