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

divデフォルトで配置される内側は、ページ自体ではなく、外側leftに対して配置する必要があります。rightdiv

のようにスタイルを設定すると、外側の右ではなく、ブラウザの右からright:0px;整列します。0pxdiv

注：私のアウターdivは固定幅ではありません。画面の解像度に応じて調整されます。レスポンシブウェブサイトのデザインです。

4

7 に答える 7

12

コンテナdivを使用できます。

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

次に、それを使用してを処理しfloat、その子を作成します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;
}
于 2013-03-01T10:29:34.397 に答える
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
}

デモ

使用が必須の場合は、両方のdivにfixed withを使用しているためposition:fixed、値を割り当てることができます。margin-left

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

デモ2

于 2013-03-01T09:51:24.600 に答える
6

2つのオプション。内側のdivを右にフロートさせるか、絶対位置を使用してそれを実現します。

フローティングの場合は、内側のDIVにfloat：rightを設定し、外側のDIVにoverflow：hiddenを設定します。

絶対測位の場合は、外側のDIVでposition：relativeを設定し、内側のDIVで位置：absoluteとright：0 top：0を設定します。

于 2013-03-01T09:53:06.080 に答える
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;
}
于 2014-11-19T10:41:51.853 に答える
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/

于 2013-03-01T10:20:16.317 に答える
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>
于 2019-10-01T08:07:35.650 に答える
0

少しハッキーですが、動作します

.outer {
    width:200px;
    height:600px;
    background-color:red;
    margin:0 auto;
    direction: rtl; 
}
.inner {
    width:50px;
    border:1px solid white;
    direction: ltr;
}
于 2020-08-02T07:37:31.450 に答える