如何在div中右对齐固定位置div [英] How to right align fixed position div inside a 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;
}

这篇关于如何在div中右对齐固定位置div的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！