スマホ商品説明文内、複数画像配置した際の高さのずれの修正方法

Question

以下の様なリンク付きのリンク付き複数画像（2列×1～2行）をスマホ商品説明文内に配置しておりますが、表示すると左右で高さのずれが生じてしまいます。

恐れ入りますが、このずれを修正する方法をご教示頂けますでしょうか？

Accepted Answer

ECマスターズの田中です。

該当部分のソースを確認したところ、
ところどころに   が含まれていることがわかりました。

  は、スペースを表示させるための文字参照の一つで、
これが片方にだけ含まれていることが原因で
高さが均等でなくなりズレが発生しておりますので、
削除をお願いいたします。

Answer

ECマスターズの田中です。

同じサイズを指定していても、
スマートフォンのページの枠にブラウザが調整しようとして
高さの差が出ている可能性があります。

スマートフォンは、機種によって横幅が異なり、
固定値（◯◯px）で指定すると、はみだしたり、余白ができる原因となりますので、

設置されている画像が、たとえば全て正方形など、
高さと横幅の比率が全て等しいのであれば、
横幅だけをパーセンテージでご設定いただくことをオススメいたします。

なお、横幅のパーセンテージは、親要素の横幅に対する割合を意味しますので、
たとえば横2列であれば、は50%、その中のは100%とご指定ください。




 



これでも解決しない場合は、お手数をおかけしますが
実際に商品ページに設置していただき、
設置した商品ページの商品管理番号をお知らせいただけますでしょうか。
私にて確認を行わせていただきます。
フォーラムで回答しづらい場合は、リクエストフォームよりご連絡ください。

Answer

お忙しい中、ご回答を戴きありがとうございます。
修正をしましたたが、やり方が間違っているのか表示は改善されませんでした。

リクエストフォームより該当のページURLをお送り致しました。
恐れ入りますが、ご確認をして戴けますでしょうか？
すみません。

Answer

ありがとうございます。
ご指摘を戴きました２点を併せて実行し、表示が修正できました。

新年早々でお忙しい中、お早いご回答戴き恐縮です。
ありがとうございました。