我一直在试图弄清楚如何创建一个在移动设备上堆叠两列的响应式电子邮件，但我一直在遇到问题。如果我将列堆叠在移动设备上，它们也倾向于堆叠在桌面电子邮件客户端上，而不是并排放置两列。如果我在桌面上并排显示列，则它们不会在移动设备上堆叠。似乎一旦我修复了一件事，另一件事就出错了。任何人都可以看看我的代码，看看有没有我错过的东西？这将不胜感激！顺便说一句，我使用ZURB的基础作为我的css文件： http://foundation.zurb.com
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta content="text/html; charset=utf-8" http-equiv="Content-Type" />
<!-- Facebook sharing information tags -->
<meta property="og:title" content="%%subject%%" />
<title></title>
<link rel="stylesheet" href="foundation.css" />
</head>
<body bgcolor="#f0f1f2" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; height: 100% !important; width: 100% !important; background-color: #f0f1f2; margin: 0; padding: 0;">
<style type="text/css">
#outlook a {
padding: 0;
}
.body{
width: 100% !important;
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
margin: 0;
padding: 0;
}
.ExternalClass {
width:100%;
}
.ExternalClass,
.ExternalClass p,
.ExternalClass span,
.ExternalClass font,
.ExternalClass td,
.ExternalClass div {
line-height: 100%;
}
img {
outline: none;
text-decoration: none;
-ms-interpolation-mode: bicubic;
}
a img {
border: none;
}
p {
margin: 1em 0;
}
table td {
border-collapse: collapse;
}
/* hide unsubscribe from forwards*/
blockquote .original-only, .WordSection1 .original-only {
display: none !important;
}
@media only screen and (max-width: 480px){
body, table, td, p, a, li, blockquote{-webkit-text-size-adjust:none !important;} /* Prevent Webkit platforms from changing default text sizes */
body{width:100% !important; min-width:100% !important;} /* Prevent iOS Mail from adding padding to the body */
#preheaderCell{padding:10px !important;}
#bodyCell{padding:0 10px 0 !important;}
#footerCell{padding:20px 10px 0 !important;}
#templateContainer{
max-width:600px !important;
width:100% !important;
}
h1{
font-size:26px !important;
line-height:100% !important;
}
h2{
font-size:26px !important;
line-height:100% !important;
}
h3{
font-size:16px !important;
line-height:100% !important;
}
h4{
font-size:16px !important;
line-height:100% !important;
}
#headerImage{
height:auto !important;
max-width:600px !important;
width:100% !important;
}
.headerContent{
font-size:20px !important;
line-height:125% !important;
}
.bodyContent{
font-size:18px !important;
line-height:125% !important;
}
.footerContent{
font-size:14px !important;
line-height:115% !important;
}
.button{
width:30% !important;
}
.note{
font-size:14px !important;
line-height: 17px !important;
}
}
</style>
<table align="center" border="0" cellpadding="0" cellspacing="0" id="bodyTable" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f0f1f2; border-collapse: collapse !important; height: 100% !important; margin: 0; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0; width: 100% !important" width="100%">
<tbody>
<!-- BEGIN PREHEADER // -->
<tr>
<td align="center" id="preheaderCell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; height: 100% !important; width: 100% !important; margin: 0; padding: 20px;" valign="top">
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: collapse !important; width: 600px; ">
<tbody>
<!-- <tr>
<td pardot-region="preheader_content01" align="center" class="preheaderContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #808080; font-family: Helvetica; font-size: 10px; line-height: 12.5px; text-align: center; " valign="top" width="180">
Email not displaying correctly?
<a href="%%view_online%%" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; color: #606060; font-weight: normal; text-decoration: underline;" target="_blank">View it in your browser</a>.
</td>
</tr> -->
</tbody>
</table>
</td>
</tr>
<!-- // END PREHEADER -->
<tr>
<td align="center" id="bodyCell" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; height: 100% !important; width: 100% !important; margin: 0; padding:0 20px 20px;" valign="top">
<!-- BEGIN TEMPLATE // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateContainer" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; border-collapse: separate !important; width: 600px; -moz-box-shadow: 0px 0px 10px #ccc; -webkit-box-shadow: 0px 0px 10px #ccc; box-shadow: 0px 0px 10px #ccc;">
<tbody>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f0f1f2; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width:100%!important;" width="100%">
<tbody><tr>
<td bgcolor="#3f7f80" align="left" class="headerContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; -moz-border-radius: 5px 5px 0 0; -webkit-border-radius: 5px 5px 0 0; border-radius: 5px 5px 0 0; font-family: Helvetica; font-size: 20px; font-weight: bold; line-height: 20px; text-align: left; vertical-align: middle; padding: 16px;" valign="top" pardot-region="header_image"></td>
</tr>
</tbody></table>
<!-- // END HEADER -->
</td>
</tr>
<tr>
<td align="center" bgcolor="#FFFFFF" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; padding: 0 20px 0;" valign="top">
<!-- BEGIN BODY // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateBody" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #FFFFFF; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" width="100%">
<tbody><tr>
<td pardot-region="body_content" align="left" class="bodyContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #3f4040; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 16px; line-height: 21px; text-align: left; padding:25px 0 25px;" valign="top">
<h3 style="color: #000000 !important; display: block; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 16px; font-weight: Bold; letter-spacing: normal; line-height: 16px; margin: 0; padding-bottom:15px; text-align: left">Hi, <%First%></h3>
<h1 style="color: #000000 !important; display: block; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 26px; font-style: normal; font-weight: bold; letter-spacing: normal; line-height: 26px; margin: 0; padding-bottom:15px; text-align: left">TITLE</h1>
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX</span>
<br>
</td>
</tr>
<tr>
<td pardot-region="body_content" align="center" class="bodyContent" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #3f4040; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 16px; line-height: 21px; text-align: center; padding:0px 0 0px; valign="top">
<div class="row">
<div class="large-6 medium-6 columns">
<br>
<div>
<b>dsafhjl dsfhajlk hj hjk hjkds hdfskj:</b><br>
hdlkjs hfkjlsdhflkjs dhfkjld shkljfhkla jsh dkljs hfklj dsah kjhfaklj hdflkj shaflk jdshfkjlh sadlfhjlsdakhjf
</div>
</div>
<div class="large-6 medium-6 columns">
<div>
<img src="xxx" alt="" border="0" width="283px" height="180px">
</div>
</div>
</div>
</td>
</tr>
<tr>
<td>
<img height="25px" src="x" alt="">
</td>
</tr>
<tr>
<td style="text-align: left;">
<span class="note" style="font-family: Helvetica Neue, Helvetica, sans-serif; font-weight: 200; color: #7e7f80; font-size: 12px; line-height: 14px;"><i>djskhfk dshkjlfh dshfalkj fhdjsl</i></span><br><br>
</td>
</tr>
</tbody></table>
<!-- // END BODY -->
</td>
</tr>
<tr>
<td align="center" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt;" valign="top">
<!-- BEGIN HEADER // -->
<table border="0" cellpadding="0" cellspacing="0" id="templateHeader" style="-ms-text-size-adjust: 100%; -webkit-text-size-adjust: 100%; background-color: #f0f1f2; border-collapse: collapse !important; mso-table-lspace: 0pt; mso-table-rspace: 0pt; width:100%!important;" width="100%">
<tbody><tr>
<td bgcolor="#3f7f80" align="left" style="-webkit-text-size-adjust: 100%; -ms-text-size-adjust: 100%; mso-table-lspace: 0pt; mso-table-rspace: 0pt; color: #505050; -moz-border-radius:0 0 5px 5px; -webkit-border-radius:0 0 5px 5px; border-radius:0 0 5px 5px; font-family: Helvetica Neue, Helvetica, sans-serif; font-size: 20px; font-weight: bold; line-height: 10px; text-align: left; vertical-align: middle;" valign="top" pardot-region="header_image"> </td>
</tr>
</tbody></table>
<!-- // END HEADER -->
</td>
</tr>
</tbody></table>
<!-- // END TEMPLATE -->
</td>
</tr>
</tbody></table><br>
答案 0 :(得分：0)
你最好使用Zurb的墨水：http://zurb.com/ink/。网站的基础不是用于电子邮件，而是基础墨水。这里还有酷炫的Playground模板：http://zurb.com/playground/responsive-email-templates。
我在这里创建了一个codepen，以防有人想通过实际代码深入研究它：http://goo.gl/aCShcF