响应式HTML电子邮件模板对齐问题

时间:2013-08-07 15:29:47

标签: html css email responsive-design alignment

我正在使用我下载的模板为我的公司创建简报。布局效果很好,看起来很棒,但是,我们需要有广告。当电子邮件的显示响应较小的浏览器和/或移动视图时,广告在第一部分内容与其下方对齐。我的目标是让广告在桌面上观看时向右显示,但在移动设备上观看时移动到内容下方。

这是我正在使用的CSS:

body {
width:100%!important;
-webkit-text-size-adjust:100%;
-ms-text-size-adjust:100%;
margin:0;
padding:0;
}

  .ExternalClass {
width: 100%;
  }

  span{
    font-family:'Segoe UI', Arial, sans-serif;
    font-size:15px;
    line-height:20px;
    color:#000;
  }

@media only screen and (max-width: 600px) {

table[class="content_wrap"] {
  width: 94%!important;
}

table[class="full_width"] {
  width: 100%!important;
}

    table[class="hide"], img[class="hide"], td[class="hide"] {
  display: none !important;
}

td[class="text-center"] {
  text-align: left!important;
}


a[class="button"] {
  border-radius:2px;
  -moz-border-radius:2px;
  -webkitborder-radius:2px;
  background-color:#0F253F;
  color:#fff!important;
  padding: 5px;
  display:block;
  text-decoration: none;
  text-transform: uppercase;
  margin: 0 0 10px 0;
}
#logo {max-width:320px;max-height:24px;margin-left:5px;}
#banner {max-width:100%;}
.img {display:none;}

这是我正在努力的HTML部分:

<!--Content 1-->
          <table width="100%" cellpadding="0" cellspacing="0" border="0" align="center" style="background:#fff;">
            <tr>
              <td width="4"></td>
              <td bgcolor="#fff" width="100%" valign="top">
                <table width="100%" cellpadding="15" cellspacing="0" border="0" bgcolor="#fff">
                  <tr>
                    <td bgcolor="#fff" style="background:#fff;">
                   <!--AD TABLE-->   
                   <table width="100" cellpadding="0" cellspacing="0" border="0" align="right" class="full_width">
                        <tr>
                          <td width="100%" class="text-center">
                            <!--image-->
                            <img style="display: block;" src="http://www.creditunions.com/assets/1/7/advertisement1.gif" border="0" alt="advertisement" width="300" height="20" /> <a href="http://pages.callahan.com/TCU_InvestmentTrends.html"><img style="display: block;" title="Trust Mutual Funds" src="http://www.creditunions.com/assets/1/7/Trust-Quarterly-anaimated--2.gif" alt="Trust Mutual Funds" width="300" height="250" id="ad" /></a><br/>
                          </td>
                        </tr>
                      </table><!--END AD TABLE-->
                      <!--SPACER TABLE-->
                      <table width="20" cellpadding="0" cellspacing="0" border="0" align="right" class="hide">
                        <tr>
                          <td width="100%">&nbsp;

                          </td>
                        </tr>
                      </table> 
                      <!--END SPACER TABLE-->
                      <table cellpadding="0" cellspacing="0" border="0" class="full_width">
                        <tr>
                          <td width="100%" class="text-center" style="font-family:'Segoe UI', Arial, sans-serif;font-size:15px;line-height:20px;color:#555;"><span style="color:#70090A;font-weight:bold;font-size:12px;line-height:22px;">READ & WATCH</span><br />
                            <a href="http://www.creditunions.com/articles/prepare-for-the-unexpected/" style="font-family: Arial, sans-serif;font-size:18px;line-height:27px;color:#2b6b87;margin:0;font-weight:bold;text-decoration:none;line-height: 22px;">Prepare For The Unexpected</a>
                            <br /><span style="font-size:14px;color: #a4a4a4;">By Name/span><br /><br />
                            <span>Not long before the financial crisis hit in 2008, Financial Partners Credit Union reduced its subprime consumer loan ratio from 28% to 8%, a decision that  seemed nothing short of prophetic when the economy sailed off a cliff later that year.  But at the time, there was nothing prescient about the decision.  It was simply a natural consequence of the strategic plan the credit union had conceived three years earlier.<br /><br /> In today&rsquo;s Q&amp;A, CEO Nader Moghaddam breaks down how Financial Partners&rsquo; strategic planning process works and how the credit union prepares for the unknown  using scenario planning.</span>
                            <br /><br />
                            <a href="http://www.creditunions.com/articles/prepare-for-the-unexpected/" class="button" style="color: #2b6b87;font-family: Calibri, 'Segoe UI', Arial, sans-serif;font-size:18px;line-height:22px;">Read more &raquo;</a>
                          </td>
                        </tr>
                      </table>
                    </td>
                  </tr>
                </table>
              </td>
              <td width="4"></td>
            </tr>
            <tr height="4">
              <td width="4">
                <table width="4" cellpadding="0" cellspacing="0" border="0">
                  <tr height="1">
                    <td width="1" bgcolor="#acb4b8"></td>
                    <td width="1" bgcolor="#acb4b8"></td>
                    <td width="1" bgcolor="#acb4b8"></td>
                    <td width="1" bgcolor="#acb4b8"></td>
                  </tr>
                  <tr height="1">
                    <td width="1" bgcolor="#d9dfe2"></td>
                    <td width="3" colspan="3" bgcolor="#acb4b8"></td>
                  </tr>
                  <tr height="1">
                    <td width="2" colspan="2" bgcolor="#d9dfe2"></td> 
                    <td width="2" colspan="2" bgcolor="#acb4b8"></td>
                  </tr>
                  <tr height="1">
                    <td width="3" colspan="3" bgcolor="#d9dfe2"></td>
                    <td width="1" bgcolor="#acb4b8"></td>
                  </tr>
                </table>
              </td>
              <td width="100%" bgcolor="#ECF0F5"></td>
              <td width="4">
                <table width="4" cellpadding="0" cellspacing="0" border="0">
                  <tr height="1">
                    <td width="1" bgcolor="#acb4b8"></td>
                    <td width="1" bgcolor="#acb4b8"></td>
                    <td width="1" bgcolor="#acb4b8"></td>
                    <td width="1" bgcolor="#acb4b8"></td>
                  </tr>
                  <tr height="1">
                    <td width="3" colspan="3" bgcolor="#acb4b8"></td>
                    <td width="1" bgcolor="#d9dfe2"></td>
                  </tr>
                  <tr height="1">
                    <td width="2" colspan="2" bgcolor="#acb4b8"></td>
                    <td width="2" colspan="2" bgcolor="#d9dfe2"></td> 
                  </tr>
                  <tr height="1">
                    <td width="1" bgcolor="#acb4b8"></td>
                    <td width="3" colspan="3" bgcolor="#d9dfe2"></td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
          <!--end Content 1-->

同样,我的目标是在moble上观看时,广告显示在“阅读更多”蓝色按钮下方。

2 个答案:

答案 0 :(得分:1)

快速回答是您的广告表应该在代码中的内容表之后,因此在调整大小时会弹出下面的内容。

使用this responsive template from EOA作为构建的好例子。

答案 1 :(得分:0)

99%的电子邮件客户端会删除所有样式表(以及可能会干扰邮件客户端UI的任何内联样式),因此无法使用此技术构建响应式电子邮件设计。