[携帯]複数画像を縦に隙間なく表示させられるか
先日コーディングをしたモバイルサイトの案件で、どうしても複数画像を縦に隙間なく表示させなければならない状況がありまして、その時の検証結果をまとめてみました。
3キャリア(docomo,au,softbank)1ソース対応
対応機種:3G以降
xhtmlで記述
サンプルページ


http://sakaki0214.com/sample/090328/index.xhtml
※シュミレーターやFirefoxのアドオン「FireMobileSimulator」や、直接携帯端末で見てください。
各サンプルの簡単な解説
[1]1画像ごとにbrで改行
<img src="画像" /><br /> <img src="画像" /><br /> <img src="画像" /><br />
[2]改行なし
<img src="画像" /> <img src="画像" /> <img src="画像" />
[3]↑のソース上の改行をなしに
<img src="画像"><img src="画像"><img src="画像">
[4]各画像をdivで囲ってみる
<div><img src="画像" /></div> <div><img src="画像" /></div> <div><img src="画像" /></div>
[5]tableの各セル(td)に各画像を入れてみる
<table cellspacing="0" cellpadding="0"> <tr><td><img src="画像" /></td></tr> <tr><td><img src="画像" /></td></tr> <tr><td><img src="画像" /></td></tr> </table>
検証結果
[1]
docomo:隙間なし
au:隙間あり
softbank:隙間なし
[2]
docomo:隙間あり
au:隙間あり
softbank:隙間なし
[3]
docomo:隙間なし
au:隙間あり
softbank:隙間なし
[4]
docomo:隙間なし
au:隙間あり
softbank:隙間なし
[5]
docomo:隙間あり
au:隙間なし
softbank:隙間なし
結論
3キャリア1ソースで実現することは不可能。
auで隙間なく縦に画像を並べる方法がtableしかないだなんて・・・。
諦めきれずに、この他にも色々検証してみたんです。
margin:0、padding:0、line-height:0、font-size:0、などなど。
どれも効果なし。
もし、どなたか解決方法をご存知でしたらぜひ教えてください・・・













めっちゃ役立ちました!
auで隙間ができてしまい困ってました。
ありがとうございました
困りますよねー。なんとかなればいいんですが。