我已经创建了一个响应式电子邮件，但我无法获得前景以识别640的宽度 - 它总是扩展得太远。我尝试了很多不同的选择，但没有任何帮助。任何帮助将不胜感激。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width"/>
<title>Responsive Email Template</title>
<style type="text/css">
td.disclaimer {
color:#565656;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
font-size:11px;
width:100%;
padding:10px;
}
h1, h2, h3, h4, h5, h6 {
color:#019dd2;
}
.call-box {
color:#ffffff;
font-family:Arial, sans-serif;
border:1px solid #cccccc;
font-size:18px;
font-weight:500;
padding:4px;
}
.message-box {
padding:10px;
color:#565656;
font-family:Arial, sans-serif;
border: 1px #ffffff solid;
}
.media {
border:0;
color:#ffffff;
font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
width:100%;
}
.color a {
color:#ffffff;
}
.color {
background: #019dd2;
}
.color-button {
padding:4px 4px;
color:#ffffff;
font-size:12px;
}
a {
color:#019dd2;
text-decoration:none;
}
.content-left {
width:68%;
}
table.container {
width: 80%;
margin: 0 auto;
max-width: 640px;
}
.content-right {
width:30%;
}
.featured {
width: 32%;
color: #ffffff;
font-family: Arial, sans-serif;
font-size: 18px;
font-weight: 500;
}
.featured-content {
padding:10px;
color:#565656;
font-family:Arial, sans-serif;
font-size:14px;
background-color:#ffffff;
font-weight:100;
border: 1px solid #cccccc;
}
td.featured-content img {
width:100%;
}
body {
width:100%;
}
.logo {
padding: 10px 20px;
color:#cccccc;
font-family:Arial, sans-serif;
font-size:11px;
}
.logo-text {
padding: 10px 20px;
color:#cccccc;
font-family:Arial, sans-serif;
font-size:11px;
}
.message {
padding:10px;
color:#565656;
font-family:Arial, sans-serif;
}
table.wrapper {
width:100%;
margin:0;
border:0;
}
@media only screen and (max-width: 640px) {
img {
width:100% !important;
}
table.container {
width:100% !important;
}
p, h1, h2, h3, h4, h5, h6 {
font-size:20px !important;
}
table.content-left {
width:100% !important;
}
table.content-right {
width:100% !important;
}
table.featured {
width:100% !important;
padding: 0 10px !important;
}
table.media img {
width:100% !important;
}
td.logo p {
font-size:12px !important;
}
}
</style>
<!--[if lte IE 9]> <style type="text/css">
table.wrapper { width:640px !important; }
</style> <![endif]-->
<!--[if mso]> <style type="text/css">
body { width:100% !important; }
table.wrapper { width:80% !important;}
</style> <![endif]-->
</head>
<body bgcolor="#f5f3f3" style="width:100%">
<table class="wrapper" border="0" cellspacing="0" cellpadding="0" bgcolor="#f5f5f3" valign="top" width="640">
<tr>
<td>
<!--START of MEDIA CONTAINER-->
<table class="container" width="640" align="center" border="0" cellpadding="0" cellspacing="0" valign="top">
<tr>
<td>
<!--Start MEDIA-->
<table class="media">
<tr>
<td colspan="3" valign="top" bgcolor="#f5f3f3" class="logo"><a href="http://monavie.com"><img src="https://www.monavie.com/sites/monavie.com/files/2013-MONAVIE.png" alt="monavie logo" border="0" style="margin-right:50px;" /></a>
<table class="logo-text" align="right" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<p style="text-align:center;">SUPERHEADER
<br />Email not displaying correctly?
<br /><a href="@HTML_PREVIEW_LINK&msgVersion=web"><u><strong>View in your web browser.</strong></u></a>
</p>
</td>
</tr>
</table>
</td>
</tr>
<tr>
<!--MAIN IMAGE-->
<td colspan="3" valign="top" bgcolor="#f5f5f3" class="main-image">
<img class="main-image" src="http://my.monavie.com/sites/my.monavie.com/files/managed/ad/slider-brazil.jpg" width="100%" />
<!--END of MEDIA-->
</td>
</tr>
</table>
<!--END of image CONTAINER-->
</td>
</tr>
</table>
<!-- Start Content Container-->
<table class="container" width="640" align="center" border="0" cellpadding="0" cellspacing="0" bgcolor="#FFFFFF">
<tr>
<td>
<!--START left content-->
<table class="content-left" align="left" border="0" cellpadding="0" cellspacing="0" width="420">
<tr>
<td rowspan="5" valign="top" bgcolor="#ffffff" class="message">
<h2>Main MonaVie Title Here</h2>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan pharetra ornare. In porttitor suscipit turpis eu tempor. Morbi interdum lacus eget nulla luctus, eu tincidunt lectus venenatis. In hac habitasse platea dictumst. Vestibulum eget neque lobortis lectus pharetra tempus sed vel velit. Proin ac risus sit amet ante mollis rhoncus. Sed aliquam urna id vehicula aliquam.
<br />
<br />Sed ipsum sapien, tempus tincidunt dui semper, rhoncus rutrum est. Sed sapien sapien, mattis sodales lacinia non, luctus non massa. Nam id fermentum ligula. Ut convallis elit nibh, eget venenatis nibh ultrices ut. Cras non convallis nunc, ac feugiat dolor. Fusce mauris enim, lacinia ac lacus et, vehicula scelerisque lorem. Maecenas ullamcorper lectus sit amet ultricies gravida. Donec nec sapien lorem. Aliquam consequat tincidunt risus ac condimentum. Integer ultricies risus sed pretium scelerisque. Nam eleifend urna at metus bibendum feugiat. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Aenean lobortis tempus ligula, nec euismod est rutrum ut.
<br />
<br />Ut rhoncus tellus et dapibus vehicula. In convallis ligula et orci faucibus, ac lacinia mauris varius. Etiam congue ac ligula sed vehicula. Maecenas tincidunt nulla vel eros varius, non luctus velit hendrerit. Donec tempor facilisis rhoncus. Sed non mauris odio. Praesent tempus gravida tellus quis gravida. Duis blandit varius lorem, eu mattis neque. Sed tempor sit amet nisi in convallis. Nam non aliquam massa. Sed mollis feugiat nunc, eget rutrum sem sagittis id. In ipsum diam, iaculis viverra hendrerit a, convallis pretium ipsum. Sed ac varius sapien, a tempus ligula.</p>
<p> </p>
<!--END of LEFT CONTENT-->
</td>
</tr>
</table>
<!--START Right Content -->
<table class="content-right" align="right" border="0" cellpadding="0" cellspacing="0">
<tr class="color" width="200">
<td class="call-box" valign="top" align="center">
<p>MONAVIE EVENTS</p>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#eeeeee" align="center" class="message-box">
<p>Winners Advance Meeting
<br />January 17-18
<br>
<br> <span class="color-button"><a href="null">READ MORE ›› </a></span>
</p>
</td>
</tr>
<tr>
<td valign="top" bgcolor="#eeeeee" align="center" class="message-box">
<p>Winners Advance Meeting Febuary 20-24
<br>
<br> <span class="color-button"><a href="null">READ MORE ››</a></span>
</p>
</td>
</tr>
<tr>
<td height="323" valign="top" align="center" bgcolor="#eeeeee" class="message-box">
<p>Ut rhoncus tellus et dapibus vehicula. In convallis ligula et orci faucibus.Ut rhoncus tellus et dapibus vehicula. In convallis ligula et orci faucib us.Ut rhoncus tellus et dapibus vehicula. In convallis ligula et orci faucibus.Ut rhoncus tellus et dapibus vehicula. In convallis ligula et orci faucibus.</p>
</td>
</tr>
<tr class="color">
<td valign="top" class="call-box" align="center">
<p><a href="null">VIEW EVENTS CALENDAR ››</a>
</p>
<!--END of RIGHT CONTENT-->
</td>
</tr>
</table>
<!--END of CONTENT CONTAINER-->
</td>
</tr>
</table>
<!--Space Start-->
<table class="top-container" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p> </p>
<!--END of SPACER-->
</td>
</tr>
</table>
<!-- Start FEATURED Container -->
<center>
<table class="container" width="640" align="center" border="0" cellpadding="0" cellspacing="0" valign="top">
<tr>
<td>
<!--START FEATURED 1-->
<table class="featured" align="left" border="0" cellpadding="0" cellspacing="0">
<tr class="color">
<td valign="top" align="center" class="call-box">
<p>The MORE Project</p>
</td>
</tr>
<tr>
<td valign="top" class="featured-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan pharetra ornare. <a href="null">READ MORE.</a>
</p>
<p>
<img src="https://www.monavie.com/sites/monavie.com/files/styles/media_blog_image_layout/public/managed/blog/slider-more-e-book.png?itok=rbcwF_qC" alt="" width="200" />
</p>
<!--END FEATURED 1-->
</td>
</tr>
</table>
<!--START FEATURED 2-->
<table class="featured" align="left" border="0" cellpadding="0" cellspacing="0">
<tr class="color">
<td valign="top" class="call-box" align="center">
<p>4x4 Jeep Program</p>
</td>
</tr>
<tr>
<td valign="top" class="featured-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan pharetra ornare. <a href="null">READ MORE.</a>
</p>
<p>
<img src="https://www.monavie.com/sites/monavie.com/files/styles/media_blog_image_layout/public/managed/blog/slider-mvp-lifelong-learning-jan14.jpg?itok=I_NcBiop" alt="" width="200" />
</p>
<!--END FEATURED 2-->
</td>
</tr>
</table>
<!--Start of FEATURED 3-->
<table class="featured" align="left" border="0" cellpadding="0" cellspacing="0">
<tr class="color">
<td valign="top" class="call-box" align="center">
<p>Organizational Call</p>
</td>
</tr>
<tr>
<td valign="top" class="featured-content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec accumsan pharetra ornare. <a href="null">READ MORE.</a>
</p>
<p>
<img src="https://www.monavie.com/sites/monavie.com/files/styles/media_blog_image_layout/public/managed/blog/slider-organization-call_16.jpg?itok=rsCRU69O" alt="" width="200" />
</p>
<!--END FEATURED 3-->
</td>
</tr>
</table>
<!--END FEATURED CONTAINER -->
</td>
</tr>
</table>
</center>
<!--Space Start-->
<table class="top-container" align="center" border="0" cellpadding="0" cellspacing="0">
<tr>
<td>
<p> </p>
<!--END OF SPACE -->
</td>
</tr>
</table>
<!--Social Media CONTAINER -->
<table class="container" width="640" align="center" border="0" cellpadding="0" cellspacing="0" valign="top">
<tr>
<td>
<!-- START MEDIA LINKS-->
<table class="media" border="0" cellpadding="0" cellspacing="0">
<tr class="color">
<td align="center">
<p><a href="http://www.monavievo.com">VIRTUAL OFFICE </a> <strong>| </strong>
<a href="http://www.monavie.com/media">ON THE MOVE </a> <strong>| </strong>
<a href="http://www.monavie.com/opportunity/meetings-and-event">MONAVIE EVENTS </a>
</p>
<!--social media-->
<table class="social-media">
<tr>
<td width="32">
<img src="https://media.monavie.com/EMAIL/images/2-0_templates/facebook-blue.gif" />
</td>
<td width="32">
<img src="https://media.monavie.com/EMAIL/images/2-0_templates/twitter-blue.gif" />
</td>
<td width="32">
<img src="https://media.monavie.com/EMAIL/images/2-0_templates/youtube-red.gif" />
</td>
<td width="32">
<img src="https://media.monavie.com/EMAIL/images/2-0_templates/instagram.png" />
<!--END of social media Table -->
</td>
</tr>
</table>
<!--END of social media container Table -->
</td>
</tr>
</table>
<!--DISCLAIMER CONTAINER -->
<table class="container" width="640" align="center" border="0" cellpadding="0" cellspacing="0" valign="top">
<tr>
<td>
<!--DISCLAIMER START-->
<table class="disclaimer" border="0" cellpadding="0" cellspacing="0">
<tr>
<td colspan="5" class="disclaimer">
<p>To ensure that you continue to receive emails from MonaVie, please add <a href="mailto:MonaVieNews@monaviecorporate.com">MonaVieNews@monaviecorporate.com</a> to your Address Book or Safe List.
<br />
<br />This email was sent to you because you asked to receive updates from MonaVie. MonaVie emails are for informational purposes only; we will never send you an email asking for personal information. To unsubscribe from future MonaVie emails, click on the "Unsubscribe" link below.
<br />
<br />
<a href="http://email.monaviemailer.com/unsubscribe.jsp">Unsubscribe</a> |
<a href="http://www.monavie.com/privacy-policy">Privacy Policy</a> |
<a href="http://www.monavie.com/">MonaVie</a> |
<a href="http://www.monavie.com/contact-us">Contact Us</a>
<br />
<br />© MONAVIE LLC 2009–2014. ALL RIGHTS RESERVED</p>
<!--END of disclaimer Table -->
</td>
</tr>
</table>
<!--END of container Table -->
</td>
</tr>
</table>
<!--END of wrapper TABLE -->
</td>
</tr>
</table>
</body>
</html>
答案 0 :(得分：0)
我相信这里有很多东西会给你带来麻烦。
您的响应式CSS应该像*[class="container-left] { ... }一样格式化。他们现在编写css的方式在大多数电子邮件客户端都无法正常工作。
我看到你有一堆colspans和rowspans，虽然我听说这可行。我从来没有太幸运。我建议在表格中嵌套表格以获得您正在寻找的结果。
如果要关注电子邮件客户端的一致性，我会避免使用padding和margin css。同样，所有的CSS样式（即font-family，font-size等）都应该是内联的。不在head。 （我假设你没有使用内联工具。）
我建议您对HTML进行有点不同的构建。 （我已经调整了你的一些HTML来说明。我没有非常清理它，所以我为额外的内联css和类道歉。它也没有经过测试。但这应该有助于获得你开始了。）见这里：http://codepen.io/anon/pen/dgrBA。