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 回答