DIVを右寄りにする方法

2015/08/22 17:54

このQ&Aのポイント

DIV要素を右寄りにする方法について説明します。
上記のコードでは、DIV要素を右寄りにするためには、CSSのtext-alignプロパティを使用します。
また、左divと右divを同じ位置に左右に表示させるためには、displayプロパティをinlineに設定する必要があります。

ZUJQBMYGELLXE
お礼率86% (31/36)

HTML
回答数2
ありがとう数0

みんなの回答 （2）
専門家の回答

質問者が選んだベストアンサー

ベストアンサー

photoslipper
ベストアンサー率31% (76/238)

2015/08/23 06:14 回答No.2

display:inline; コレをしていしているので、DIVの意味が無くなっています。誤解を恐れず簡単に言えば、DIVの指定を無効にしているようなモノです。なので、このinline指定を無くして、（か、或いはdivデフォルトの display : block ; とする） DIV右,DIV左{ float : left ; width : 任意のDIVの幅をpxや％等々で指定 ; } コレを加えてみてください。こうすれば、質問者様の図のようにdivが左詰でfloatされます。 divは、デフォルトで横幅が100％の指定になっているので、この指定をし直してやらないと、float出来ないので注意です。 ※一度要素をフロートさせると、そのあとの内容も、フロートされた要素に続いて流れ込むことがあります。なので、HTML側に <div 右>～～～</div> <div 左>～～～</div> <div style="clear : both ;"></div> この最後の「<div style="clear : both ;"></div>」一行を入れることで、フロートがクリアされ、その後の行が、div右、div左の横に流れ込むのを解除します。（IEだとコレが無くても正常に表示されることもありますけど、他のブラウザで表示が崩れたりしますので注意）

その他の回答 (1)

t_ohta
ベストアンサー率38% (5292/13827)

2015/08/22 22:18 回答No.1

display:inline; にしているので、そのdivはインライン要素です。 <div class="右">はdivの幅の中で右寄せになているでしょうが、幅は文字数分しかないので右に寄っているのか左に寄っているのか中央にあるのか判別出来ません。 div.右{ float: right; text-align: right; } としたら思い通りに表示されるでしょう。