0

クライアント用の電子メール テンプレートを作成しています。小さなバグがたくさんあります。

横の画像を間にスペースを空けないと並べることができず、テーブルの幅が一致しません。

ここでクロス クライアント プレビューをチェックしてください: [削除済み]

ここに私のコードがあります：

<table width="600" bgcolor="000000" style="padding-left: 14xpx;">
    <tr>
        <td align="left" cellspacing="0" cellpadding="0" style="padding: 5px 0 0 0;margin-bottom: 0;">
            <ul  style="padding:0;">
                <li style="list-style: none;">
                    <span><a href="#" style="border: none !imporant;"><img src="http://www.kieshajewel.com/sirio/left-img-01.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></a></span></li>
                <li style="list-style: none;"><span><a href="#" style="border: none !imporant;"><img src="http://www.kieshajewel.com/sirio/left-img-02.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></a></span><singleline /></li>
                <li style="list-style: none;"><span><a href="#" style="border: none !imporant;"><img src="http://www.kieshajewel.com/sirio/left-img-03.jpg" alt=" Join Executive Chef Massimo Bebber" style="margin-bottom: -4px !important;"/></a></span></li>
            </ul>
        </td>

        <td align="left" cellspacing="0" cellpadding="0" style="padding: 10px 0 0 0; position: relative; left: -5px;">
            <span>
                <a href="http://siriony.com/sample-page/chef-massimo-bebber/" style="border: none !imporant;">
                    <img src="http://www.kieshajewel.com/sirio/chef-massimo-bebber.jpg" alt-"Sirio Chef" /></a>
            </span>
        </td>

        <td align="left">
            <img src="http://www.kieshajewel.com/sirio/sirio-thumbnails.png" alt="Sirio Ristorante" />
        </td>
    </tr>
</table>

<table width="605" bgcolor="000000" style="margin-top: -20px;">
    <tr>
        <td align="left"><img src="http://www.kieshajewel.com/sirio/lines.gif" /></td>
    </tr>
</table>

<table width="606" bgcolor="000000" style="">
    <tr>
       <td align="left"> <img src="http://www.kieshajewel.com/sirio/footer-01.gif" alt="Reserve Now" />
            <img src="http://www.kieshajewel.com/sirio/footer-02.gif" alt="Reserve Now" />
            <img src="http://www.kieshajewel.com/sirio/footer-03.gif" alt="Reserve Now" />
            <img src="http://www.kieshajewel.com/sirio/footer-04.gif" alt="Reserve Now" />
            <img src="http://www.kieshajewel.com/sirio/footer-05.gif" alt="Reserve Now" />
            <img src="http://www.kieshajewel.com/sirio/footer-06.gif" alt="Reserve Now" />
           </td>
    </tr>
</table>
4

2 に答える 2

0

99% の場合、画像間にスペースが入っています。これは、人々display:block;が画像タグを忘れているためです。ただし、この場合、画像をフローティングしています。これは、表示ブロックが必要ないまれなケースです。ただし、クライアントごとに画像間の間隔がわずかに異なるため、多くの空き容量がない限り、HTML メールでこの手法をお勧めしません。

各画像を独自の表セルに配置すると、問題が解決するはずです。

<td width="">
  <img  alt="" src="" width="" height="" style="margin: 0; border: 0; padding: 0; display: block;">
</td>

それでも問題が解決しない場合は、コードを再投稿してください。その時点でもう一度検討します。

于 2013-10-08T20:15:35.233 に答える
0

あなたが投稿したものには非常に多くの問題があり、あなたが何をしようとしているのかを正確に伝えるのは困難です.

以下は厳しいことを意味します。

まず、ネガティブなポジショニング スタイルをランダムに追加する前に、すべてを適切な場所にレイアウトします。その理由はありませんでした。第二に、別のクライアントを引き受ける前に、html と css に関する本を手に入れたいと思うかもしれません。あなたは学ぶべきことがかなりあります。テキストのレイアウト、画像の配置、セルの配置に注意してください。

以下は、ほとんどのゴミを取り除きます。

<table width="600" bgcolor="000000" style="padding-left: 14px;">
    <tr>
        <td align="left" valign="top" cellspacing="0" cellpadding="0" style="padding:0px;margin:0px;">
            <img src="http://www.kieshajewel.com/sirio/left-img-01.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;" /><br />
            <img src="http://www.kieshajewel.com/sirio/left-img-02.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;"/><br />
            <img src="http://www.kieshajewel.com/sirio/left-img-03.jpg" alt=" Join Executive Chef Massimo Bebber" style="border:0px;margin:0px;"/>
        </td>

        <td align="left" valign="top" cellspacing="0" cellpadding="0" style="padding:0px;margin:0px;">
            <span>
                <a href="http://siriony.com/sample-page/chef-massimo-bebber/" style="border: none !imporant;"><img src="http://www.kieshajewel.com/sirio/chef-massimo-bebber.jpg" alt-"Sirio Chef"  style="border:0px;" /></a>
            </span>
        </td>

        <td align="left" valign="top">
            <img src="http://www.kieshajewel.com/sirio/sirio-thumbnails.png" alt="Sirio Ristorante" />
        </td>
    </tr>
    <tr>
        <td align="left" valign="top" colspan="3"><img src="http://www.kieshajewel.com/sirio/lines.gif" /></td>
    </tr>
    <tr>
       <td align="left" valign="top" colspan="3"> <img src="http://www.kieshajewel.com/sirio/footer-01.gif" alt="Reserve Now" />
            <img src="http://www.kieshajewel.com/sirio/footer-02.gif" alt="Reserve Now" />
            <img src="http://www.kieshajewel.com/sirio/footer-03.gif" alt="Reserve Now" />
            <img src="http://www.kieshajewel.com/sirio/footer-04.gif" alt="Reserve Now" />
            <img src="http://www.kieshajewel.com/sirio/footer-05.gif" alt="Reserve Now" />
            <img src="http://www.kieshajewel.com/sirio/footer-06.gif" alt="Reserve Now" />
        </td>
    </tr>
</table>
于 2013-10-08T17:23:57.623 に答える