获取两列（堆叠在文本上的图像）以正确地彼此相邻

Question

这是仅在 Outlook 2010 中出现的错误。此电子邮件模板似乎适用于 90% 的设备和浏览器。

下图是它在 Outlook 2010 中的外观示例。粗略的蓝色绘制旨在显示它的外观。您还可以查看显示该部分应如何显示的整个代码的小提琴。

http://postimg.org/image/zacxr5acr/

这是完整的小提琴链接http://jsfiddle.net/Nexus1234/bxp14vcw/

注意 - 下面的示例代码只是相关部分，在电子邮件中单独发送不会导致问题，它位于 jsfiddle 中的完整 html 中的某个位置

<!-- Two Column (Images Stacked over Text) -->

      <table align="center" bgcolor="#EEEEED" border="0" cellpadding="0" cellspacing=
      "0" class="deviceWidth" width="580">
        <tbody>
          <tr>
            <td class="center" style="padding:10px 0 0 5px">
              <table align="left" border="0" cellpadding="0" cellspacing="0" class=
              "deviceWidth" width="49%">
                <tbody>
                  <tr>
                    <td align="center">
                      <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
                      <img alt="" class="deviceWidth" src=
                      "https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/forum.jpg"
                      style=
                      "border-radius: 4px; width: 267px; border-width: 0px; border-style: solid; height: 200px;" /></p>
                    </td>
                  </tr>

                  <tr>
                    <td style=
                    "font-size: 12px; color: #6f6f6f; font-weight: normal; text-align: left; font-family: arial,helvetica neue,helvetica,sans-serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
                    <table style="width:100%;border-bottom: 1px solid #333">
                        <tbody>
                          <tr>
                            <td style="padding:0 10px 10px 5px" valign="top">
                            <img alt="" id="circle" src=
                            "https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/point.png"
                            style=
                            "border-width: 0px; border-style: solid; float: left; width: 40px; height: 40px;" /></td>

                            <td style="padding:0 10px 10px 0" valign="middle">
                              <h1 style=
                              "text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif">
                              The Roman Forum<br />
                              &nbsp;</h1>
                            </td>
                          </tr>
                        </tbody>
                      </table>

                      <p><span style=
                      "font-family:arial,helvetica neue,helvetica,sans-serif;">Here,
                      in a small space hemmed in by the great rocks of the Capitoline
                      and Palatine hills, the greatest names of Roman history fought
                      for power and prestige. Amidst an extraordinary concentration
                      of famed and marvellous buildings jostling for space, you will
                      walk where Antony spoke over Caesar&#8217;s body, Cicero
                      delivered stinging orations and the legions processed in
                      triumph.</span></p>
                    </td>
                  </tr>
                </tbody>
              </table>

              <table align="left" border="0" cellpadding="0" cellspacing="0" class=
              "deviceWidth" width="49%">
                <tbody>
                  <tr>
                    <td align="center">
                      <p style="mso-table-lspace:0;mso-table-rspace:0; margin:0">
                      <img alt="" class="deviceWidth" src=
                      "https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/villa-deste-tivoli.jpg"
                      style=
                      "border-radius: 4px; width: 267px; border-width: 0px; border-style: solid; height: 200px;" /></p>
                    </td>
                  </tr>

                  <tr>
                    <td style=
                    "font-size: 12px; color: #6f6f6f; font-weight: normal; text-align: left; font-family: arial,helvetica neue,helvetica,sans-serif; line-height: 24px; vertical-align: top; padding:10px 8px 10px 8px">
                    <table style="border-bottom: 1px solid #333">
                        <tbody>
                          <tr>
                            <td style="padding:0 10px 10px 5px" valign="top">
                            <img alt="" id="circle" src=
                            "https://mailerdocs.s3.amazonaws.com/i2in/email_assets/108/point.png"
                            style=
                            "border-width: 0px; border-style: solid; float: left; width: 40px; height: 40px;" /></td>

                            <td style="padding:0 10px 10px 0" valign="middle">
                              <h1 style=
                              "text-decoration: none; font-size: 16px; color: #363636; font-weight: bold; font-family:Arial, sans-serif">
                              The Villa Adriana &amp; The Villa D'Este</h1>
                            </td>
                          </tr>
                        </tbody>
                      </table>

                      <p><span style=
                      "font-family:arial,helvetica neue,helvetica,sans-serif;">Experience
                      the opulence of two ages in a trip out to the inspiring
                      hillside retreat of Tivoli. In the morning, we visit the
                      massive, brilliantly preserved and sprawling villa of the
                      Emperor Hadrian, where luxury on an unparalleled scale centres
                      on a fantasy rendition of the River Nile. The afternoon is
                      spent amidst the fountains and gardens of the enchanting
                      Renaissance Villa d&#8217;Este.</span></p>
                    </td>
                  </tr>
                </tbody>
              </table>
            </td>
          </tr>
        </tbody>
      </table><!-- End Two Column (Images Stacked over Text) -->

Answer 1

一个建议是始终牢记 20 像素规则。 Outlook 喜欢在表格周围添加间距，这让对齐的表格很麻烦。

我通常的方程式是， （包装表 - 20 像素）/2。 你的例子： (580 - 20px) = 560 / 2。

百分比很棘手，我会将您的表格设置为固定宽度。无论如何，您的 deviceWidth 类都会处理您在移动设备上的宽度。

我建议您也将其应用到所有对齐的表格中。 如果这不起作用，请告诉我。