1
我正在處理HTML新聞稿/電子郵件，並針對不同版本的Outlook（2007,2010,2011,2013）提出了一個問題。我想要的佈局適用於我們測試過的所有其他客戶端（使用「可傳遞性測試」，顯示其在客戶端中的外觀）。HTML新聞稿 - 針對不同版本的Outlook修復程序
鏈接到的差異圖像：
http://jimharrison.co.uk/wp-content/uploads/2013/10/outlook.jpg
我的目標是什麼了：爲了讓手機的底部，坐在最後的「聯賽點」的文字。
注意：圖像設置爲伸展到100％。
展望2011：形象就在下面。
展望2007年，2010年：圖像坐在遠離底部，但圖像的頂部正確對齊。
展望2013：形象是離開的，也有左邊'聯盟點'之間不需要的間距。
代碼：
<table width="580" border="0" cellpadding="0" cellspacing="0" align="center" class="scaleForMobile">
<tr>
<td width="100%">
<!-- Column 1 -->
<table width="257" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" align="left" class="imageScale1">
<tr>
<td width="100%" height="10" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="100%" style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 16px;">
<span class="heading" style="font-size: 22px; color: #3B80C1; line-height: 22px;">It's time <br>to step it up a gear</span><br><br>
Starting on 1st November and running through to 29th December we've got "<span class="heading" style="color: #3B80C1;">Shake It Up Rio</span>" with Samsung offering 34 people the chance to soak up the sun in Rio, Brazil! As well as having the chance to party to the Samba beat, we also have weekly Best Incentive Points for Stores and Sales Advisors to win!
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
<tr>
<td width="100%" style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 16px;">Sell the Samsung Galaxy Note 3 smartphone and Galaxy Gear smartwatch, as well as the handsets listed below to earn league points and work your way up the league table!
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
<tr>
<td>
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy Note 3 and Galaxy Gear
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
10 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy S4
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
5 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy S4 mini
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
3 League Points
</td>
</tr>
<tr>
<td width="100%" height="4" bgcolor="#ffffff" colspan="2">
<img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/dashed.png" alt="dashed" width="260" border="0" class="imageScale" style="display: block;">
</td>
</tr>
<tr>
<td style="font-size: 11px; color: #3B80C1; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
Galaxy Ace 3
</td>
<td style="font-size: 11px; color: #989A9D; text-align: left; font-weight: normal; font-family: Arial, sans-serif; line-height: 18px;">
1 League Points
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- Padding + (Outlook) -->
<table class="eraseForMobile" width="1" border="0" cellpadding="0" cellspacing="0" align="left" style="font-size: 0;line-height: 0;border-collapse: collapse;">
<tr>
<td width="0" height="2" style="font-size: 0;line-height: 0;border-collapse: collapse;"><p style="padding-left: 10px;"> </p>
</td>
</tr>
</table>
<!-- Column 2 -->
<table width="270" border="0" cellpadding="0" cellspacing="0" align="right" class="imageScale2" bgcolor="#ffffff">
<tr>
<td width="100%" valign="top" bgcolor="#ffffff" class="mobileCenter">
<a href="#" target="_blank;"><img src="http://jimharrison.co.uk/wp-content/uploads/2013/10/galaxy_note_3.jpg" alt="galaxy note 3 and gear" width="100%" border="0" class="imageScale" style="display: block;"></a>
</td>
</tr>
<tr>
<td width="100%" height="20" bgcolor="#ffffff"></td>
</tr>
</table>
</td>
</tr>
</table>
謝謝你的回覆！我實際上已經把它們放在單獨的td中。我很抱歉，因爲我應該將更完整的代碼粘貼到原始問題中。 編輯：現在完整的代碼！ – lejimmie
儘管如此，valign =「bottom」而不是valign =「top」可能會訣竅。 。 。 –
valign =「bottom」沒有工作:( – lejimmie