我正在编写一些HTML代码来制作HTML电子邮件。 我已经做了一些研究，我发现使用旧的学校html，比如表格等是最好的方法。
在你以前的问题得到所有帮助之后（谢谢！）我开始研究其余部分并在移动设备上轻松阅读布局，这就是我现在所拥有的;
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<meta name="viewport" content="initial-scale=1.0">
<meta name="format-detection" content="telephone=yes">
<style>
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-image: url(background.png); background-repeat: repeat-x; background-color: #dbdadb; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;}
p { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:0.9em;}
.contact {margin-left:5px; margin-top:15px; width:170px; font-size:0.9em; text-align:center;}
h1 { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:1.1em; font-weight:normal;}
img {outline:none; text-decoration:none; -ms-interpolation-mode: bicubic; display:block;}
a img {border:none;}
.headerwrapper {width:600px; background-color: #000000; margin:0px; padding:0px;}
.header {text-align:center;}
.wrapper {width:600px; background-color: #dbdadb; align:center;}
.fixedwidth {width:600px !important;}
.content {width:340px;}
.icons {width:260px;}
.devices {width:600px; height:310px;}
.miniwrapper {width:600px;}
.footer { background-image: url(http://i49.tinypic.com/54f2ac.png); text-align:center; line-height:1.2; width:320px; font-size:0.9em;}
.footermobile {display:none;}
.actiemobile {display:none;}
.iconwrapper {margin:0; line-height:1.2; font-size:0.9em;}
.iconwrapper p {margin-left: 0px; margin-bottom:10px;}
.headermobile {display:none;}
.devicesmobile {display:none;}
@media all and (max-width: 400px) {
body { margin:0; padding:0; width:100% !important; overflow-y:scroll; background-image: url(background.png); background-repeat: repeat-x; background-color: #dbdadb;}
p { margin:0 0 10px 26px; line-height:1.2; width:350px; font-size:0.9em;}
.contactmobile {margin-left:50%; margin-top:15px; width:170px; font-size:1.1em; text-align:center; line-height:1.2em;}
h1 { margin:0 0 10px 26px; line-height:1.2; width:320px; font-size:1.1em; font-weight:normal;}
.headerwrapper {width:320px; background-color: #000000; margin:0px; padding:0px;}
.header {display:none;}
.wrapper {width:100%; background-color: #dbdadb; align:center;}
.fixedwidth {width:100% !important;}
.content {width:320px; display:block;}
.icons {width:260px; display:block;}
.devices {display:none;}
.miniwrapper {width:100%;}
.footer {display:none;}
.actie {display:none;}
.footermobile {display:block; background-image: url(footermobile.png); text-align:center; line-height:1.2; width:320px; height:164px; font-size:0.9em;}
.actiemobile {display:block;}
.headermobile {display:block; text-align:center;}
.devicesmobile {display:block;}
}
/* Client-specific Styles */
#outlook a {padding:0;} /* Force Outlook to provide a "view in browser" menu link. */
.ExternalClass {width:100%;} /* Force Hotmail to display emails at full width */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Force Hotmail to display normal line spacing. */
#backgroundTable {margin:0; padding:0; width:100% !important; line-height: 100% !important;}
/* End reset */
</style>
<title>email template</title>
</head>
<body>
<table class="wrapper" width="100%" align="center" border="0" cellpadding="0" cellspacing="0" margin="0">
<tbody class="headerwrapper">
<tr class="header">
<td class="fixedwidth" colspan="2">
<img src="logo.png" border="0">
</td>
</tr>
<tr class="devices" style="width:600px; height:300px;">
<td colspan="2">
<img src="devices.png">
</td>
</tr>
<tr class="headermobile">
<td class="fixedwidth" colspan="2">
<img src="logomobile.png" border="0">
</td>
</tr>
<tr class="devicesmobile">
<td colspan="2">
<img src="devicesmobile.png">
</td>
</tr>
</tbody>
<tr class="miniwrapper">
<tr class="fixedwidth">
<td class="content" align="left">
<h1>Werkt u al met apps?</h1>
<p>Het ontwikkelen van applicaties, oftewel apps, is namelijk booming! Steeds meer merken en
bedrijven zien het gemak van een app in. Het is de ideale optie voor het versterken van uw merk, zowel extern als intern, of het opzetten van een geheel nieuw product. Ook de enorme groei in gebruik van mobiele apparaten zorgt er voor dat een sterk merk niet meer kan achter blijven.</p>
<p>Mocht u geïnteresseerd zijn in onze service,
van op maat gemaakte applicaties en backend oplossingen, neem dan gerust contact met ons op.
U bent van harte welkom voor een kop koffie bij ons in de mediaBunker, tijdens een verkennend gesprek of een demonstratie van de
mogelijkheden van mediaBunker als bedrijf.</p>
<p>Alvast bedankt en hopelijk tot ziens.</p>
</p>
</td>
<td class="icons">
<table>
<tr>
<td colspan="2">
No matter what device.<br>
We build natively.
</td>
</tr>
<tr>
<tbody class="iconwrapper">
<tr text-align="center">
<td><img src="apple.png"></td>
<td><p>Apple iOS is the operating<br>
system that powers the <br>
iPhone, iPad and iPod touch.</p>
</td>
</tr>
<tr>
<td><img src="android.png"></td>
<td><p>With partners like Google,<br>
HTC and Motorola, Android is <br>
the fastest growing mobile OS.</p>
</td>
</tr>
<tr>
<td><img src="windows.png"></td>
<td><p>Together Microsoft and Nokia<br>
support conventional users <br>
with Windows Phone.</p>
</td>
</tr>
<tr>
<td><img src="html5.png"></td>
<td><p>Looking for other platforms<br>
like BlackBerry, Samsung <br>
Bada or HTML5 & CSS3?<br>
We can build it!</p>
</td>
</tr>
</tbody>
</tr>
</table>
</td>
</tr>
</tr>
<tr>
<td class="actie" colspan="2">
<img src="http://i47.tinypic.com/11qi7pw.png">
</td>
<td class="actiemobile" colspan="2">
<img src="actiemobile.png">
</td>
</tr>
<tr>
<td class="footer" colspan="2">
<table>
<tr cellspace="0">
<td width="200px" text-align="center"><p class="contact">Suikersilo-West 23 <br> 1165 MP Halfweg</p></td>
<td width="200px" text-align="center"><p class="contact"><a href="tel:0031238200140">Tel +31 23 820 0140</a><br> <a href="mailto:info@mediabunker.com">info@mediabunker.com</a></p></td>
<td width="200px" text-align="center"><p class="contact"><a href="http://mediabunker.com">www.mediabunker.com</a><br> <a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a></p></td>
</tr>
</table>
</td>
<td class="footermobile" colspan="2">
<table>
<tr cellspace="0">
<td width="200px" text-align="center">
<p class="contactmobile">
Suikersilo-West 23<br>
1165 MP Halfweg<br>
<a href="tel:0031238200140">Tel +31 23 820 0140</a><br>
<a href="mailto:info@mediabunker.com">info@mediabunker.com</a><br>
<a href="http://mediabunker.com">www.mediabunker.com</a><br>
<a href="http://twitter.com/mediabunker">twitter.com/mediabunker</a><br>
</p>
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
我遇到了一些麻烦，使得布局在移动设备上运行良好。我想我想出了一个更好的解决方案，使用背景图像并将其他图像（设备，横幅等）置于其上。这可能会解决这个问题，对吗？
我还有另外两个问题;当在移动设备上查看页面时，我无法将图标td置于内容之下。我认为显示块可以做到这一点，但它没有...而且，当我添加图标表时，右侧有这个奇怪的空间，它必须以某种方式发生冲突，我该如何解决这个问题？ / p>
如果有任何帮助，这是我之前的问题; HTML email table nesting 这是在线版本; http://kellyvuijst.nl/email/email.html
答案 0 :(得分：0)
.icons td左对齐（当视口宽度小于400px时），因为它上面没有padding或margin，而您的其他内容（h1，p）有26px margin-right。
您可以通过将26px的padding-left应用于.icons来解决此问题。这将使.icons的左侧边缘与其上方的内容对齐。
BUG＃2，ATTEMPT 2：
在查看您在评论中提供的演示链接后，我可以看到您描述的问题及其原因：您的内容比其包含元素更广。
您为320px的所有段落设置了显式宽度，这使得.iconwrapper比预期更宽。我认为您不需要设置段落宽度，因此只需删除该CSS声明。
（我在调试这些布局问题时的建议是使用chrome中的开发人员工具来检查HTML元素并查看CSS样式的应用方式。我发现它确实可以帮助我可视化我的代码，看看它是如何实现的影响布局。）