Html 如何在div内右对齐固定位置div

我的代码是这样的

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

默认情况下，位于

左侧的内部
div
，需要相对于
右侧
w.r.t.放置，而不是相对于页面本身

如果我将其样式设置为
right:0px
，然后它从浏览器右侧对齐
0px
，而不是从外部
div
的右侧对齐

注意：我的外部
div
不是固定宽度；它可以根据屏幕分辨率进行调整。这是一个快速响应的网站设计。
为什么不使用
位置：绝对

位置：固定
始终相对于浏览器

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
    position:relative
}
.inner {
    width:50px;
    border:1px solid white;
    position:absolute; right:0
}



如果必须使用
position:fixed
，则可以指定
左边距
值，因为您对两个div都使用fixed with

.inner {
    width:50px;
    border:1px solid white;
    position:fixed; margin-left:150px
}

两个选项。只需将内部div向右浮动，或者使用绝对定位即可

对于浮动，只需在内部DIV上设置float:right，在外部DIV上设置overflow:hidden

对于绝对定位，只需在外部分区上设置位置：相对，并设置位置：绝对和右侧：0顶部：0内部分区。
如果在这种情况下，您希望将
.inner
元素设置为固定定位元素，并将
.outer
中的其他内容保留为“可滚动”，我建议您将
.internal
位置设置为绝对定位元素。然后，使用
overflow:auto
在它之后创建一个新包装：

<div class="outer">
  <div class="inner">Some text here...</div>
  <div class="flow">content</div> <!-- extra markup -->
</div>


这里有一些文字。。。
内容

下面是一个演示：
您可以使用容器div：

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

我想这就是你想要的

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


.outer {
    margin: 0 auto;
    width: 860px;
    direction: rtl;
    background-color: black;
    height: 1200px;
}

.inner {
    float: right;
    position: fixed;
    text-align: center;
    width: 220px;
    background-color: red;
    height: 50px;
}


这里有一些文字
.外部{
保证金：0自动；
宽度：860px；
方向：rtl；
背景色：黑色；
高度：1200px；
}
.内部{
浮动：对；
位置：固定；
文本对齐：居中；
宽度：220px；
背景色：红色；
高度：50px；
}
以下内容适合我


<div style="position: relative;">
    <div id="overlay">
        overlay content
    </div>
</div>

<style>
#overlay {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    z-index: 3;
}
</style>


覆盖内容
#覆盖层{
位置：绝对位置；
显示：块；
排名：0；
右：0；
z指数：3；
}
有点老套，但它很管用

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
    direction: rtl; 
}
.inner {
    width:50px;
    border:1px solid white;
    direction: ltr;
}

这两种方法都不适用于
位置：固定，我不确定溢出：隐藏会有什么帮助。它使它与页面对齐，而不是与外部对齐div@Twon-ha-添加溢出：隐藏到包含浮动子元素的父容器允许父容器增加高度以包含浮动子元素。@RavishKumar-我只能假设您没有实现我的解决方案与我概述的完全相同。您的第二个解决方案似乎有效，但我的外部div的问题不是固定宽度。它根据屏幕宽度自行调整。所以我不能说宽度在里面。我已经在我的query@RavishKumar使用position:Absolute的问题是什么？我想要的是它应该是主体div fixed顶部和内部的20%。正如我在第一次尝试中所解释的，position:fixed始终是相对于浏览器的。这一个对我有效，谢谢Hanks，我必须将最大宽度与%宽度一起添加，但这是一个完美的解决方案。

<div style="position: relative;">
    <div id="overlay">
        overlay content
    </div>
</div>

<style>
#overlay {
    position: absolute;
    display: block;
    top: 0;
    right: 0;
    z-index: 3;
}
</style>

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
    direction: rtl; 
}
.inner {
    width:50px;
    border:1px solid white;
    direction: ltr;
}