获取两列(图像堆叠在文本上)以正确放置在彼此旁边

时间:2015-02-05 00:29:22

标签: html outlook html-email outlook-2010

这是仅在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) -->

1 个答案:

答案 0 :(得分:0)

一个建议是始终牢记20px规则。 Outlook喜欢在表格周围添加间距,使对齐的表格变得麻烦。

我通常的等式是, (包装表 - 20px)/ 2。 你的例子: (580 - 20px)= 560/2。

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

我建议你也应用这个对齐的表。 如果这不起作用,请告诉我。