html - 右マージンから右端のフロートを移動する

Question

5 つの要素が左側にうまくフロートしているナビゲーション バーがあるとします。次に、右端に配置したい要素を追加しますが、右端に浮かせた要素と実際のドキュメントの端の間に少し余白が必要です。私がやるfloat:right;と、要素はドキュメントの最後まで壊されます。position-rightまたはを台無しにしようとしてmargin-rightも、何も起こりません。要素をエッジから遠ざけるにはどうすればよいですか?

Answer 1

いくつかのオプションは、最初にラッパーを使用して2つのdivの分離を制御します。

HTML：

<div id="wrapper">
<div id="left">Left Div</div>
<div id="right">Right Div</div>
</div>

CSS：

#left {
    float: left;
}

#right {
    float: right;
}

#wrapper {
    width: 500px;
    margin: auto;
    padding: auto;
    overflow: auto;
}

http://jsfiddle.net/wDjFV/

もう1つのオプションはfloat: left、両方で実行し<div>、そこにマージンを付けて分離することです。

HTML：

<div id="left">Left Div</div>
<div id="right">Right Div</div>

CSS：

#left {
    float: left;
}

#right {
    float: left;
    margin-left: 200px;
}

http://jsfiddle.net/wDjFV/3/

アップデート：

知らないかもしれない2番目のオプションについて考えてみてください。通常のスタッキング動作を実現するには、フローティングしているものclear:bothより下にあるすべてのsに対してCSSルールを実行する必要があります。<div>

Answer 2

padding-rightではなく、あなたが探しているものかもしれませんposition-right。いずれにせよmargin-right、ボックスをページの端から引き離すように作業する必要があります。padding-rightボックスをページの端に保ちますが、含まれているコンテンツを端からさらに離します。