0
我正在使用我下載的模板來爲我的公司創建新聞稿。該佈局效果很好，看起來不錯，但是，我們需要有一個廣告。當電子郵件的顯示對較小的瀏覽器和/或移動視圖做出響應時，廣告將在內容的第一部分與其下方對齊。我的目標是讓廣告在桌面上查看時顯示在右側，但在移動設備上查看時移動到內容下方。響應HTML電子郵件模板對齊問題
這裏是我使用的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上查看時，「多讀」藍色按鈕。
感謝您的信息。我們用來發送電子郵件的客戶實際上允許我們包含css，而且我已根據需要對其進行了測試，即使在未完全適用的客戶端中，我們也對佈局感到滿意。所以我仍然試圖看看我是否可以實現這個目標。 –
你有你自己的自定義電子郵件客戶端？ –
我們使用一家名爲DMI的公司。 –