12

ご存知のとおり、Outlook2007はWord2007レンダリングエンジンを使用しているため、HTMLメールメッセージを設計する際に際限なく悲しみを覚えます。[ここに暴言を挿入]特に、フロート、マージン、パディングは-と言いましょうか。-サポートが不十分です。

テキストが画像を折り返すようにfloatをシミュレートするには、次のように簡単に使用できます。

<img src="foo.png" align="right">

問題はパディング/マージンです。パディング/マージンなしで、ラップされたテキストは間抜けに見える画像に突き当たります。回避策の1つは、画像を編集し、マージンをシミュレートする透明なフレーミングを追加することです。

誰かが他の回避策を知っていますか？

4

6 に答える 6

19

Outlook 2007のサポートに関するMicrosoftのドキュメントを読んだ後、画像にhspaceを使用すると、パディングと同様に画像の周囲に空白を作成できることがわかりました。

[img src = "image.jpg" align = "left" border = "0" hspace = "10"]

これにより、10pxのパディングに相当します。電子メールクライアント全体で非常にうまく機能します。

他の誰かが問題をグーグルで検索しているときに、私と同じようにこの質問に遭遇した場合に備えて、共有したいと思いました。

于 2011-08-05T15:42:22.447 に答える
7

私は今朝それを試しました、そして悲しいことに画像の境界線はサポートされていません、しかしあなたはテキスト領域に概念を実装することができます:)。

border-left：7px solid #fff;

たとえば、白いコンテナの中には、左のパディングの視覚効果があります。

于 2010-08-18T10:46:47.150 に答える
6

Outlook '07でパディングがサポートされている場所の1つは、<td>タグです。だから私は画像をテーブルにラップすることでこれを解決しました：

<table cellspacing="0" cellpadding="0" border="0" align="left">
<tbody>
    <tr>
        <td>
        <table cellspacing="0" cellpadding="0" border="0" align="left">
        <tbody>
            <tr>
                <td valign="top" style="padding: 0px 10px 0 0;">
                <img src="http://www.mysite.com/images/myimage.jpg" style="width:60px; height:100px;" border="0" />
                </td>
            </tr>
        </tbody>
        </table>
        <p>The text I want to see wrap...</p>
        </td>
    </tr>
</tbody>
</table>

align="left"は親テーブルと、画像をすぐに保持しているテーブルにあることに注意してください。このハックはOutlook2013に必要です。Litmusではそれがなくても他のすべてが素晴らしく見えました。

于 2013-07-11T02:53:08.200 に答える
2

Outlookおよび他のすべての電子メールクライアントの画像にパディングを追加します。これでうまくいくことがわかりました。

img {  
    padding-left: 25px!important;  
    padding-top: 25px!important;  
    padding-bottom: 25px!important;  
    padding-right: 25px!important;  
}
于 2012-02-29T14:27:55.900 に答える
0

このスレッドは古いことは知っていますが、別の方法として、画像にコンテナと同じ色の無地の境界線を付けることもできます。

于 2010-08-17T21:48:54.263 に答える
-3

次のようなmarginコマンドを使用して、インラインスタイルをimgタグに追加する場合：

<img src="foo.png" align="right" style="margin:5px;">

それがあなたがやろうとしていることだと思います。

于 2010-04-24T18:13:51.097 に答える