響應式HTML電子郵件模板對齊問題

Question

我正在使用下載的模板來為公司創建新聞通訊。 布局效果不錯，外觀也不錯，但是，我們必須有一個廣告。 當電子郵件的顯示響應較小的瀏覽器和/或移動視圖時，廣告將在內容的第一部分上方與其下方對齊。 我的目標是使廣告在台式機上觀看時顯示在右側，而在移動端上觀看時在內容下方移動。

這是我正在使用的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上觀看時顯示在“更多”藍色按鈕下方。

Answer 1

快速的答案是，您的廣告表應位於代碼中的內容表之后，因此調整大小后，它會在下面彈出。

使用EOA中的此響應式模板作為構建示例。

Answer 2

99％的電子郵件客戶端會刪除所有樣式表（以及可能干擾郵件客戶端UI的任何內聯樣式），因此無法使用此技術來構建響應式電子郵件設計。