マニュアルの高さ/マージンの計算をせずに、2つのアイテムを右に揃える方法は？

Question

This fiddleがこの問題を示しています。

Iジョイントユニットとして、二つの別々の行に、右に画像やボタンを整列しようとしています。私はwrapper div（ "right-stuff"）をposition：relativeで作成しました。そのためposition：absoluteをその子、ボタンに使用できます。

問題は、高さの計算を傷つけることなく、ボタンを右に揃えるための良い方法がわかりません。

私がしたのはposition:absoluteとright:0ですが、これはフローから削除され、コンテナ（「右のもの」）には含まれません。赤い背景が届かないそうすべき"。

もう1つの問題は、 "right-stuff"の後の次の項目が正しい位置にあるためにmargin-topを必要とするか、そうでなければ "right-stuff" 、または人工的なマージン（ボタンの高さを考慮したもの）が含まれます。あまりにも多くの知識がここにあります。

両方のアイテムを一貫性のあるユニットとして機能させるためのよりよい方法は、「右寄せ」ですが、フローから物事を取り出すことはありませんか？

明らかに、これは誰かがこの質問をした初めてのことではありませんが、ボタンの高さと同じ余白を手動で追加するなど、醜いハッキングのない特定の問題に対処する答えは見つかりませんでした。

を編集してください：テキストアラインメントは、私がとにかく考えていたものよりも良い解決策です。 1つの注意点：ボタンが実際にテキストであると仮定し、画像自体では機能しません。これは私の例では大丈夫です。画像はコンテナ内の最も広いものですが、コンテナ内に画像よりも幅の広い別の要素があったらどうなりますか？画像を右に揃えておくにはどうすればいいですか？

Answer 1

はい、これらの要素（imgとbutton）が両方ともinline-blockであるため、text-align: rightをそのまま使用できます。

Answer 2

テキストアライメントの正しい点は何ですか？ http://jsfiddle.net/HXH5Z/4/

でedittedフィドル

<div id="nContainer"> 
    <div id="nRight-stuff"> 
     <div id="nRight-img"> 
      <img src="http://sharecare.files.wordpress.com/2008/04/cute-animals-1.jpg?w=490" /> 
     </div> 
     <button id="nRight-btn">A right aligned button</button> 
    </div> 
    <br style="clear: both" /> 
</div> 

#nRight-stuff { 
    float: right; 
    text-align: right; 
} 

Fiddle

Answer 3

チェックアウトは基本的に私はちょうどバックフローのボタンをもたらしたが、コンテンツを揃え、DIVでそれを囲んました（テキスト整列） 右の方へ。同じことが#right-stuff divにtext-align: rightルールを追加するだけで達成できますが、画像をそのdiv内の右に揃えたい場合はわかりません。