HTMLで3つのイメージを整列する電子メール

Question

enter image description here 3つのイメージをHTML電子メールで整列すると、一部の電子メールクライアントでは機能しますが、他の電子メールクライアントでは機能しません。私が間違っていたアイデアは何ですか？ 3つの画像を電子メール全体に均等に配置したい場合は、中央に配置します。私が使用しているコードは次のとおりです。

<div> 
<img align="left" src="img link" style="float: left; width: 28%; margin-right: 8%; margin-bottom: .5em;" width="28"> 
<img src="img link" style="float: middle; width: 28%; margin-right: 5%; margin-bottom: .5em;" width="28"> 
<img align="right" src="img link" style="float: right; width: 28%; margin-right: 0%; margin-bottom: .5em;" width="28"> 
</div> 

この画像はOutlook 2013のPCでの見た目です。マックでは、それらは中心合わせされ、整列した version on PC,

Answer 1

テーブルを使用してみてください。電子メールクライアントは、スタイルを決めるのが難しく、実装が広く異なることはよく知られていますが、大部分がレイアウトの面で非常に似ています。

は

非常にシンプルなマークアップ： FO：

<table style="width: 100%;"> 
    <tbody> 
     <tr> 
      <td style="width: 33%;"> 

など。

Answer 2

シンプルなソリューション

put in div width=100% 

各画像における

width = 28% max-width = XXXpx display=inline-block 

あなたのコードを尊重あなたのコード幅= 28％と幅= 28は間違ったアイデアを使用すると間違っています（余白 - 右：5％;マージン下：.5em;すべてでEM 『"）これはすべて、または内のピクセルを使用し、diferentsの解像度でdiferent幅を紹介する』

Answer 3

私自身の意見では、あなたがプロパティで遊ぶことができる『flex』

代わりに。画像の幅を調整する、多分それはあなたのケースでは、画像の余白を調整した方がよい、とそれはそのブロックを中心に画像を維持することができ、ここでデモあなたが `幅=」を使用しないのはなぜ http://codepen.io/Carr1005/pen/jApyZz

<div style='display : flex;'> 
    <img src="img_link" style="flex : 1;margin : 0 5%"> 
    <img src="img_link" style="flex : 1; margin : 0 5%"> 
    <img src="img_link" style="flex : 1; margin : 0 5%"> 
</div>