2015.02.04 [水]
インライン要素ブロック要素
display:
- .dis-in { display:inline; background-color:#111; }
- .dis-bl { display:block; background-color:#111; }
- .dis-inb { display: inline-block; background-color:#111; }
inline
改行されず、後に続いて並んでいく。次々とラインになっていく。もちろん<br>を入れれば改行される。
<div class="dis-in">
とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
</div>
<div class="dis-in">
となりのきゃくはよくかきくうきゃくだ。
</div>
<div class="dis-in">
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
</div>
結果とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
</div>
<div class="dis-in">
となりのきゃくはよくかきくうきゃくだ。
</div>
<div class="dis-in">
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
</div>
とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
となりのきゃくはよくかきくうきゃくだ。
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
block
1行まるごと専有し、次に来るものは必ず改行される。これは1つのブロックである。
<div class="dis-bl">
とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
</div>
<div class="dis-bl">
となりのきゃくはよくかきくうきゃくだ。
</div>
<div class="dis-bl">
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
</div>
結果とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
</div>
<div class="dis-bl">
となりのきゃくはよくかきくうきゃくだ。
</div>
<div class="dis-bl">
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
</div>
とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
となりのきゃくはよくかきくうきゃくだ。
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
inline-block
1つ1つがブロックとしての塊。次に来るものは改行される。
<div class="dis-inb">
とうきょうとっきょきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
</div>
<div class="dis-inb">
となりのきゃくはよくかきくうきゃくだ。
</div>
<div class="dis-inb">
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
</div>
結果とうきょうとっきょきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
</div>
<div class="dis-inb">
となりのきゃくはよくかきくうきゃくだ。
</div>
<div class="dis-inb">
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
</div>
とうきょうとっきょきょかきょくきょかきょくちょうきょうきゅうきょきゅうかきょかきょひ。
となりのきゃくはよくかきくうきゃくだ。
ぼうずがびょうぶにぼうずのじょうずなえをかいた。
よく使う場所
- imgに指定して、続きの文章などを自動的に改行させたい時。
- tableを使わずに並べる。
- テキストにlinkを付ける時、テキストそのものだけでなく、その行まるごとや、テキストの範囲の四方をクリックできるリンクにしたい時。
- 他にもあると思います。
- 関連記事
-
-
たまに使う特殊文字
2015/01/23
-
特定の行へジャンプするためのHTML
2015/01/25
-
インライン要素ブロック要素
2015/02/04
-
a:link { の順序
2015/02/11
-
word-break,word-wrap,white-space
2015/02/13
-
コメントの投稿