logo标签列表

如何在一个div中将固定位置的div右对齐

htmlcss
12

我的代码是这样的。

<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;
}

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.
If I style it to be right:0px;, then it aligns 0px from the browser's right, not the outer div's right.
NOTE : My outer div is not fixed width; it adjust as per screen resolution. It's a responsive website design.
谢谢，我必须在百分比宽度之外添加max-width，但这是完美的解决方案。 - Ravish Kumar
7个回答
12
您可以使用一个容器 div：
<div class="outer">
    <div class="floatcontainer">
        <div class="inner">some text here</div>
    </div>
</div>

然后使用它来处理浮动，并使其子元素的位置为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;
}
10

为什么不使用 position:absolute

position:fixed 始终相对于浏览器定位

.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，那么您可以为两个
元素指定相同的固定宽度，并分配margin-left值。
.inner {
    width:50px;
    border:1px solid white;
    position:fixed; margin-left:150px
}

演示2

1
你的第二个解决方案似乎可以工作，但问题在于我的外部 div 没有固定宽度。它会根据屏幕宽度自适应调整大小，所以我无法在其中声明宽度。我已经在我的查询中更新了这一点。 - Ravish Kumar
@RavishKumar，使用position:absolute有什么问题？ - Sowmya
我想要的是它应该在主体div内部固定，距离顶部20%。 - Ravish Kumar
正如我在第一次尝试中所解释的那样，position:fixed属性始终相对于浏览器。 - Sowmya
6

有两个选择。简单地将内部DIV浮动到右侧，或使用绝对定位来实现。

如果要浮动，只需在内部DIV上设置float:right，并在外部DIV上设置overflow:hidden。

如果要使用绝对定位，请在外部DIV上设置position:relative，并在内部DIV上设置position:absolute、right:0和top:0。

这两个都不能与 position: fixed 一起使用，而且我不确定 overflow: hidden 怎么会有帮助。 - Twon-ha
它使其与页面对齐而不是外部div。 - Ravish Kumar
@Twon-ha - 将overflow:hidden添加到包含浮动子元素的父容器中，可以使父容器在高度上增加以包含浮动子元素。 - Billy Moat
@RavishKumar - 我只能假设您没有按照我所概述的方式完全实现我的解决方案。 - Billy Moat
2
我认为这正是你想要的。
<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;
}
1
如果您希望将 .inner 元素设置为固定定位元素，并使其他内容在 .outer 中保持可滚动状态，我建议您将 .inner 元素的位置设置为绝对定位元素。然后，使用 overflow:auto 在其后创建一个新的包装器：
<div class="outer">
  <div class="inner">Some text here...</div>
  <div class="flow">content</div> <!-- extra markup -->
</div>

这里有一个演示：http://jsfiddle.net/tovic/ZLbqn/3/
0
有点 hacky，但能用。
.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
    direction: rtl; 
}
.inner {
    width:50px;
    border:1px solid white;
    direction: ltr;
}
0

以下对我有效。


<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>
网页内容由stack overflow 提供, 点击上面的
可以查看英文原文，
原文链接