HTML响应电子邮件堆积列无效

时间:2015-09-28 18:06:02

标签: email mobile

我一直试图让这些列堆叠起来,似乎没有解决方案。有几层嵌套表(这里没有显示),以保持客户端的结构一致,但我不知道这是否与我的列不会堆叠的原因有关。我尝试将媒体查询应用于td,table和div元素,但我在几个网站上阅读的解决方案都没有。以下是我的代码的要点:

<head>
<style>
  table[class="main-table"] {
  width: 625px !important;
  }
  td[class="colsplit"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    font-size: 12px !important;
  }
  table[class="colsplit"] {
    display: block !important;
    width: 100% !important;
    height: auto !important;
    font-size: 12px !important;
}
</style>
</head>

<body>
<table class="main-table" align=center width=625px style="color:#787878; border-spacing:0; border-collapse:collapse; text-decoration:none;" border=0>  
  <!-- Contact Us -->
  <tr>
    <!-- Advertise column -->
    <td class="colsplit" align=left width=50% style="vertical-align:top; padding:0px; margin:0px; display:block;">
      <table class="colsplit" width=100% style="border-color:orange; border-width:5px; border-style:solid;">
        <tr>
          <td class="colsplit" align=left style="color:#787878; font-size:16px; font-family:Arial, Helvetica, Sans Serif; font-weight:bold; margin:0px; padding:0px 0px 10px 10px;">Advertise
          </td>
        </tr>
        <tr>
          <td class="colsplit" style="vertical-align:top; color:#787878; font-size:12px; font-family:Arial, Helvetica, Sans Serif; margin:0px; padding:0px 0px 10px 10px;">To advertise in our newsletter, please email:
            <br>
            <a href="mailto:email@domain.com" style="color:#333333; text-decoration:none;"><strong>email@domain.com</strong>
            </a>
          </td>
        </tr>
      </table>
    </td>
    <!-- Advertise column close -->
    <!-- Services column -->
    <td class="colsplit" align=left width=50% style="vertical-align:top; padding:0px; margin:0px; display:block;">
      <table class="colsplit" align=left width=100% style="border-color:orange; border-width:5px; border-style:solid;">
        <tr>
          <td class="colsplit" style="color:#787878; font-size:16px; font-family:Arial, Helvetica, Sans Serif; font-weight:bold; margin:0px; padding:0px 20px 10px 0px;">Newsletter Services
          </td>
        </tr>
        <tr>
          <td class="colsplit" style="vertical-align:top; color:#787878; font-size:12px; font-family:Arial, Helvetica, Sans Serif; margin:0px; padding:0px 20px 10px 0px;">Interested in reading more?
            <br>Click the link below to
            <br>
            <a href="http://links.email.dmnews.com/ctt?kn=10&ms=MTI0NDc1MTgS1&r=MjE1MTE3OTc2ODc0S0&b=3&j=NjIxMzY0NDMzS0&mt=1&rt=0" name="DMNregister" style="color:#333333; text-decoration: none;"><strong>Sign Up for Our Newsletters</strong>
            </a>
          </td>
        </tr>
        <tr>
          <td class="colsplit" style="vertical-align:top; color:#787878; font-size:12px; font-family:Arial, Helvetica, Sans Serif; margin:0px; padding:0px 20px 10px 0px;">If you no longer wish to receive this newsletter, click here to
            <br>
            <a href="http://www.pages05.net/haymarketmediagrouplimited/DirectMarketingNews/dmnunsubscribe?spMailingID=12447518&spUserID=MjE1MTE3OTc2ODc0S0&spJobID=NjIxMzY0NDMzS0&spReportId=NjIxMzY0NDMzS0" name="Unsubscribe" style="color:#333333; text-decoration: none;" target="_blank" xt="LPWEBFORMOPTIN" xtwebform="1740515"><strong>unsubscribe</strong>
            </a>
          </td>
        </tr>
        <tr>
          <td class="colsplit" style="vertical-align:top; color:#787878; font-size:12px; font-family:Arial, Helvetica, Sans Serif; margin:0px; padding:0px 20px 10px 0px;">To manage your account and Newsletter settings, click here for
            <br>
            <a href="http://links.email.dmnews.com/ctt?kn=8&ms=MTI0NDc1MTgS1&r=MjE1MTE3OTc2ODc0S0&b=3&j=NjIxMzY0NDMzS0&mt=1&rt=0" name="ManageAccount" style="color:#333333; text-decoration:none;"><strong>My Account</strong>
            </a>
          </td>
        </tr>
      </table>
    </td>
    <!-- Services column close -->
  </tr>
  <!-- Contact Us close -->
</table>
</body>

0 个答案:

没有答案