こんにちはゲストさん。会員登録(無料)して質問・回答してみよう!

-広告-

締切り済みの質問

div の改行に関して

div の使い方に関して教えてください。

添付した画像1のHTMLの場合、改行されて■の次の段に「Grade」が来てしまいます。
しかし、画像2のHTMLの場合、なぜか「Grade」の次の段落に■がきてしまいます。
改行なしで■の右隣にGradeが来るようにするにはどうすればいいでしょうか?

添付画像の中の画像1のHTML
■<div style="font-family: Arial,sans-serif,Verdana; font-size: 20px;"><b><STRONG>Grade:</STRONG></b>
<br>
Near Mint:
</div>
<br>


添付画像の中の画像2のHTML
■<div style="font-family: Arial,sans-serif,Verdana; font-size: 20px; display: inline-block; _display: inline;"><b><STRONG>Grade:</STRONG></b>
<br>
Near Mint:
</div>
<br>

投稿日時 - 2015-12-29 00:06:43

QNo.9102835

困ってます

このQ&Aは役に立ちましたか?

0人が「このQ&Aが役に立った」と投票しています

-広告-
-広告-

回答(2)

ANo.2

こんにちは。
まず、
>画像1のHTMLの場合、改行されて■の次の段に「Grade」が来てしまいます。
<div>は指定がない場合ブロック要素として扱われ、要素の前後に改行が来ます。そのため■の後に改行が入ります。
>画像2のHTMLの場合、なぜか「Grade」の次の段落に■がきてしまいます。
"■"は<p>などで囲まれていないためinline要素として取り扱われます。そのため要素の前後に改行が入りません。
「Grade:<br>Near Mint:」はそれをかこっているdivでstyle=display inline-block;が指定されているため、改行が入らず、■の隣に並んでいるような表示になっていると思われます。(添付した画像にあるように■を選択すると隣にある文字の大きさに合わせていることが分かります。)
改行なしで■の右隣にGradeが来るようにするには、<div>の中に■を入れてしまうといいと思います。
<div style="font-family: Arial,sans-serif,Verdana; font-size: 20px; _display: inline; display: inline-block; ">■<b><strong>Grade:</strong></b>
<br>Near Mint:</div><br>
こうすると■の次にそのままGrade:が来るようになります。(Garade:は太字・強調されているので文字の大きさが違うと思いますが。)この場合、display: inline-block; は必要ないと思いますが...
また
■Grade:
Near Mint:
という風に文字を並べたい場合は(あまり良い方法ではありませんが、)■は全角文字なので&nbsp;を二個入れるとよいと思います。

<div style="font-family: Arial,sans-serif,Verdana; font-size: 20px; _display: inline; display: inline-block; ">■<b><strong>Grade:</strong></b>
<br>&nbsp;&nbsp;Near Mint:</div>

HTMLはブラウザによって表示が変わることがあるので、うまく表示されない場合はすみません。

投稿日時 - 2015-12-29 09:01:20

ANo.1

<div>の前後では改行されます。
■をGrade:の直前に移動させる。

ブロック要素とインライン要素の区別について学ぶといいと思います。

投稿日時 - 2015-12-29 08:20:48

-広告-
-広告-
-広告-
-広告-