如何在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;
}