« IEでjpgにfilter:alpha(opacity)を使用した場合のドット抜け | トップページ | 3キャリア共通のサイトを作成する場合のDOCTYPE宣言 »

auで画像に文字を回り込ませる場合

携帯サイトで画像を左に配置し、文章を右に回り込ませたい場合、以下のように記述するかと思います。

<img src="img.jpg" style="float:left;" align="left" />
<div style="color:#ff0000;">回り込む文章</div>

auではfloat指定ができないので、同時にalign="left"を指定します。

これでうまくいくかな?と思ったのですが、文章が回りこまず。。。
調べてみたところ、auでは回り込む文章にdivなどのブロック要素を使うと、画像のalignがクリアされてしまい回り込まないのだとか。

そのため、以下のように記述したところうまく文章が回りこみました。

<img src="img.jpg" style="float:left;" align="left" />
<span style="color:#ff0000;">回り込む文章</span>

これを知らずtableでレイアウトしていた頃がありました。。。

 

« IEでjpgにfilter:alpha(opacity)を使用した場合のドット抜け | トップページ | 3キャリア共通のサイトを作成する場合のDOCTYPE宣言 »

mobile」カテゴリの記事

コメント

コメントを書く

コメントは記事投稿者が公開するまで表示されません。

(ウェブ上には掲載しません)

トラックバック

この記事のトラックバックURL:
http://app.f.cocolog-nifty.com/t/trackback/1139838/31097177

この記事へのトラックバック一覧です: auで画像に文字を回り込ませる場合:

« IEでjpgにfilter:alpha(opacity)を使用した場合のドット抜け | トップページ | 3キャリア共通のサイトを作成する場合のDOCTYPE宣言 »