2016年2月16日火曜日

CSSでtext-align: justifyを使っているdivの中にimgタグを入れると文字の最後が伸びる不具合

CSSでtext-align: justifyを使っているdivの中にimgタグを入れると文字の最後が伸びる不具合が起きました。

.box {
text-align: justify
}

<div class="box">
こんばんはお元気ですか?
わ    た    し    は
<img src="img.jpg" class="img">
</div>

こんな感じに最後の一文は不自然に伸びてしまいました。

対処として、imgのCSSにdisplay: block;を入れることで解決しました。

.img {
display: block;
}

ですね。
そもそも、そんなdivの中にimgを入れるのが良くないとは思ったのですが、仕様上仕方なくです・・・。

0 件のコメント:

コメントを投稿