div の改行に関して

質問

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

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

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

添付画像の中の画像２の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>

回答No.2

noname#246457

こんにちは。
まず、
>画像１のHTMLの場合、改行されて■の次の段に「Grade」が来てしまいます。
<div>は指定がない場合ブロック要素として扱われ、要素の前後に改行が来ます。そのため■の後に改行が入ります。
>画像２の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はブラウザによって表示が変わることがあるので、うまく表示されない場合はすみません。

回答No.1

notnot

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

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