我正在使用我下载的模板为我的公司创建简报。布局效果很好，看起来很棒，但是，我们需要有广告。当电子邮件的显示响应较小的浏览器和/或移动视图时，广告在第一部分内容与其下方对齐。我的目标是让广告在桌面上观看时向右显示，但在移动设备上观看时移动到内容下方。
这是我正在使用的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%">
</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’s Q&A, CEO Nader Moghaddam breaks down how Financial Partners’ 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 »</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上观看时，广告显示在“阅读更多”蓝色按钮下方。
答案 0 :(得分：1)
快速回答是您的广告表应该在代码中的内容表之后，因此在调整大小时会弹出下面的内容。
使用this responsive template from EOA作为构建的好例子。
答案 1 :(得分：0)
99％的电子邮件客户端会删除所有样式表（以及可能会干扰邮件客户端UI的任何内联样式），因此无法使用此技术构建响应式电子邮件设计。