div内の固定位置divを右揃えにする方法

Question

私のコードは次のとおりです。

<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は、外側のdiv w.r.tなくページへ右に配置する必要があります。

もし私がそれが正しいと言えば：0px;それは右のdivの権利ではなくブラウザから0pxを行うようにします。

注：私の外側divは固定幅ではありません。画面の解像度ごとに調整されます。それは応答性の高いウェブサイトのデザインです。

Answer 1

あなたは、コンテナのdiv使用することができますfloatを処理するためにそれを使用すると

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

をし、その子を作る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; 
} 

Answer 2

ブラウザ

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

DEMO

---

に対する常にposition:absolute

position:fixedを使用していないのはなぜそれがposition:fixedを使用する義務であるならば、あなたはmargin-left値を割り当てることができます両方のdivにfixedを使用しているからです。

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

DEMO 2

Answer 3

つのオプション。単に内側のdivの右端を浮かべるか、またはそれを達成するために絶対配置を使用します。

浮動小数点の場合は、内側のDIVには右を、外側のDIVにはオーバーフローを単に設定します。

アブソリュートポジショニングの場合は、単純にposition：relativeを外側DIVに設定し、position：absoluteとright：0 top：0を内側DIVに設定します。

Answer 4

場合には、あなたは固定配置要素として.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/

Answer 5

私はこれがあなたの望むものだと思う。

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