1

次のHTMLを使用して、電子メールで送信し、Webページの作成に使用しています。 

<div>
   <a name="id-23"></a>
   <h2>Free Legal Defense Services for Lester et al</h2>
   <div class="ExternalClass43FFE3E27D8B457FBF45BD9E20AC7FE3">
      <p><img src="http://www.mynevadacounty.com/NC/CEO/Resources/FridayMemo/FM-20121026-State Capitol.jpg" alt="" style="margin:5px;float:left;vertical-align:auto" />
         Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
   </div>
   </span>
</div>

ウェブページは私が望むようにテキストを折り返しますが、電子メールはそうではありません：

ここに画像の説明を入力してください

テキストを適切に折り返すにはどうすればよいですか？

4

3 に答える 3

3

コンテンツが単に列を作成するときに画像を別のテーブルセルに配置すると、画像の周りにテキストが折り返されることはありません。廃止された属性align="left"を使用すると、画像が左に浮き、テキストが折り返されるサイトと同じようにメールを動作させることができます。

ただし、マージンプロパティもOutlookによって無視され、テキストが画像に突き当たるようになります。これを修正するには、廃止された属性hspace = "5"（左右に5pxの間隔を追加）とvspace = "5"（上下に5pxの間隔を追加）を使用します。

残念ながら、これらの属性を使用して右と下だけをターゲットにする方法はないため、画像全体に間隔を空けることになります。それがうまくいかず、右と下だけに間隔を空ける必要がある場合は、画像自体にその空白を追加することをお勧めします。それ以外の場合は、より複雑なアプローチを読んでください。

hspaceとvspaceを使用する場合、または画像に空白を追加する場合は、インラインスタイル属性からmarginプロパティを除外する（または0に設定する）ことをお勧めします。それを無視しないでください。

<div>
   <a name="id-23"></a>
   <h2>Free Legal Defense Services for Lester et al</h2>
   <div class="ExternalClass43FFE3E27D8B457FBF45BD9E20AC7FE3">
      <p><img src="http://www.mynevadacounty.com/NC/CEO/Resources/FridayMemo/FM-20121026-State Capitol.jpg" alt="" align="left" hspace="5" vspace="5" style="float:left;" />
         Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
   </div>
   </span>
</div>

より複雑なアプローチ：

廃止された属性「align」は画像とテーブルの両方で機能するため、単一の画像をテーブルに配置し、代わりにフロートします。次に、画像を保持している単一のテーブルセル要素にパディングを適用します。

<div>
   <a name="id-23"></a>
   <h2>Free Legal Defense Services for Lester et al</h2>
   <div class="ExternalClass43FFE3E27D8B457FBF45BD9E20AC7FE3">
      <!--[if mso]>
      <table align="left" border="0" cellpadding="0" cellspacing="0" width="130" height="60">
         <tr>
            <td style="padding: 0 5px 5px 0;">
            <![endif]-->
               <img align="left" width="125" height="53" style="float: left; width: 125px; height: 53px; margin: 0 5px 5px 0;" src="http://www.mynevadacounty.com/NC/CEO/Resources/FridayMemo/FM-20121026-State Capitol.jpg" alt="" />
            <!--[if mso]>
            </td>
         </tr>
      </table>
      <![endif]-->
      <p>
         Blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah blah
      </p>
   </div>
   </span>
</div>

出典：

于 2017-04-12T12:39:32.510 に答える
0

HTMLメールに関するこの素晴らしい記事によると...

CSSの99％が機能しない

したがって、カスタムhtmlメールで本当に落ち込んで汚くしたい場合は、テーブルを使用することに固執します。Mail Chimpには、ベースとして始めることをお勧めする無料のhtmlメールテンプレートがたくさんあります...テーブルはおかしなお尻の痛みです。

于 2012-10-29T21:45:14.790 に答える
0

tdsのテーブル行幅2を使用できます！

「float：right」の代わりにこれを試してください

                  <table cellpadding="0" cellspacing="0" width="100%">
                        <tr>
                            <td >
                               your text Here                  
                            </td>
                            <td>
                                <div class="text">
                                    <img src="###" alt="" border="0" />
                                </div>
                            </td>
                        </tr>
                    </table>
于 2014-10-20T10:03:15.310 に答える