HTML电子邮件列打破
我已经构建了一个适用于所有客户端的电子邮件模板，在Litmus上进行了测试。问题当然是2007年的展望。我有一个两列和三列的布局，它可以工作50％，然后50％就会中断吗？
在同一封电子邮件中，我会有一个可行的，然后是几个部分，它们完全相同的代码断开了吗？
我正在使用Campaign Monitor，如果这有帮助......
两栏
三栏
有谁知道为什么会这样？我的意思是，如果它有效，它必须正确编码但是为什么它会随机打破其他时间？
*修改
这是我的代码，2007年和2010年似乎无法修复它。
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width"/>
<title>Email Template</title>
<link href='http://fonts.googleapis.com/css?family=Open+Sans:400,300,700' rel='stylesheet' type='text/css'>
<style type="text/css">
/*////// RESET STYLES //////*/
body, #bodyTable, #bodyCell{height:100% !important; margin:0; padding:0; width:100% !important;}
table{border-collapse:collapse;}
img, a img{border:0; outline:none; text-decoration:none;}
h1, h2, h3, h4, h5, h6{margin:0; padding:0;}
p{margin:0!important;}
/*////// CLIENT-SPECIFIC STYLES //////*/
.ReadMsgBody{width:100%;} .ExternalClass{width:100%;} /* Force Hotmail/Outlook.com to display emails at full width. */
.ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div{line-height:100%;} /* Force Hotmail/Outlook.com to display line heights normally. */
table, td{mso-table-lspace:0pt; mso-table-rspace:0pt;} /* Remove spacing between tables in Outlook 2007 and up. */
#outlook a{padding:0;} /* Force Outlook 2007 and up to provide a "view in browser" message. */
img{-ms-interpolation-mode: bicubic;} /* Force IE to smoothly render resized images. */
body, table, td, p, a, li, blockquote{-ms-text-size-adjust:100%; -webkit-text-size-adjust:100%;} /* Prevent Windows- and Webkit-based mobile platforms from changing declared text sizes. */
/*////// FRAMEWORK STYLES //////*/
.flexibleContainerCell{padding-top:30px; padding-Right:20px; padding-Left:20px;}
.flexibleImage{height:auto;}
.bottomShim{padding-bottom:30px;}
.imageContent, .imageContentLast{padding-bottom:30px;}
.nestedContainerCell{padding-top:30px; padding-Right:20px; padding-Left:20px;}
/*////// FRAMEWORK STYLES EXTRA //////*/
.ContainerCell{padding-top:0px; padding-Right:0px; padding-Left:0px;}
.hero-imageContent, .heroimageContentLast{padding-bottom:0px;}
/*////// GENERAL STYLES //////*/
body, #bodyTable{background-color:#F5F5F5;}
#bodyCell{padding-top:10px; padding-bottom:40px;}
#emailBody{background-color:#FFFFFF; border:0px solid #DDDDDD; border-collapse:separate;}
#emailHeader{background-color:#002855; border:0px solid #DDDDDD; border-collapse:separate;}
h1, h2, h3, h4, h5, h6{color:#202020; font-family:'Open Sans',Arial,Helvetica,sans-serif; font-size:20px; line-height:125%; text-align:Left;}
.textContent, .textContentLast{color:#404040; font-family:'Open Sans',Arial,Helvetica,sans-serif; font-size:12px; line-height:125%; text-align:Left; padding-bottom:30px;}
.textContent a, .textContentLast a{color:#2C9AB7; text-decoration:underline;}
.nestedContainer{background-color:#E5E5E5; border:1px solid #CCCCCC;}
.emailButton{background-color:#2C9AB7; border-collapse:separate;}
.buttonContent{color:#FFFFFF; font-family:'Open Sans',Arial,Helvetica,sans-serif; font-size:18px; font-weight:bold; line-height:100%; padding:15px; text-align:center;}
.buttonContent a{color:#FFFFFF; display:block; text-decoration:none;}
.emailCalendar{background-color:#FFFFFF; border:1px solid #CCCCCC;}
.emailCalendarMonth{background-color:#2C9AB7; color:#FFFFFF; font-family:'Open Sans',Arial,Helvetica,sans-serif; font-size:16px; font-weight:bold; padding-top:10px; padding-bottom:10px; text-align:center;}
.emailCalendarDay{color:#2C9AB7; font-family:'Open Sans',Arial,Helvetica,sans-serif; font-size:60px; font-weight:bold; line-height:100%; padding-top:30px; padding-bottom:30px; text-align:center;}
/*////// MOBILE STYLES //////*/
@media only screen and (max-width: 480px){
/*////// CLIENT-SPECIFIC STYLES //////*/
body{width:100% !important; min-width:100% !important;} /* Force iOS Mail to render the email at full width. */
table[id="emailBody"], table[id="emailHeader"], table[class="flexibleContainer"]{width:100% !important;}
img[class="flexibleImage"]{height:auto !important; width:100% !important;}
table[class="emailButton"]{width:100% !important;}
td[class="buttonContent"]{padding:0 !important;}
td[class="buttonContent"] a{padding:15px !important;}
td[class="textContentLast"], td[class="imageContentLast"]{padding-top:30px !important;}
/*////// GENERAL STYLES //////*/
td[id="bodyCell"]{padding-top:10px !important; padding-Right:10px !important; padding-Left:10px !important;}
}
</style>
<!--[if mso 12]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]-->
<!--[if mso 14]>
<style type="text/css">
.flexibleContainer{display:block !important; width:100% !important;}
</style>
<![endif]-->
</head>
<body>
<center>
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="bodyTable" style="background-color;#f3f3f3:">
<tr>
<td align="center" valign="top" id="bodyCell" bgcolor="#f3f3f3">
<!-- EMAIL CONTAINER // -->
<table border="0" cellpadding="0" cellspacing="0" width="620" id="emailBody">
<repeater>
<layout label="Two Column">
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table class="flexibleContainer" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody><tr>
<td class="flexibleContainerCell" valign="top" width="600">
<!-- CONTENT TABLE // -->
<table class="flexibleContainer" align="Left" border="0" cellpadding="0" cellspacing="0" width="260">
<tbody><tr>
<td class="imageContent" valign="top">
<img src="http://placehold.it/350x150" class="flexibleImage" style="max-width:620px;" width="260" editable="true">
</td>
</tr>
<tr>
<td class="textContent" valign="top">
<font face="'Open Sans', Arial, sans-serif"><multiline lable="Main Text">Erecab ium re plis nimaio quis utempos inullanis imo dent eseque pa id modipie nihitio mo offictasped quasinum re, ne occus denis nus, nosae.</multiline></font>
<font face="'Open Sans', Arial, sans-serif"><multiline lable="Sub Text">
Orita que poreseniae pelignimus imi, ipsus idunt et ant. Cabore omnient ommoditiur apit prorum harchic itatemporrum conet etusanda dolupist, sunt voluptae.
</multiline></font>
<font face="'Open Sans', Arial, sans-serif"><singleline lable="Read more"><a href="" style="color: #002855; font-size:12px; font-weight:900; text-decoration: none;">EN SAVOIR PLUS ›</a></singleline></font>
</td>
</tr>
</tbody></table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table class="flexibleContainer" align="Right" border="0" cellpadding="0" cellspacing="0" width="260">
<tbody><tr>
<td class="imageContentLast" valign="top">
<img src="http://placehold.it/350x150" class="flexibleImage" style="max-width:620px;" width="260" editable="true">
</td>
</tr>
<tr>
<td class="textContent" valign="top">
<font face="'Open Sans', Arial, sans-serif"><multiline lable="Main Text">Erecab ium re plis nimaio quis utempos inullanis imo dent eseque pa id modipie nihitio mo offictasped quasinum re, ne occus denis nus, nosae.</multiline></font>
<font face="'Open Sans', Arial, sans-serif"><multiline lable="Sub Text">
Orita que poreseniae pelignimus imi, ipsus idunt et ant. Cabore omnient ommoditiur apit prorum harchic itatemporrum conet etusanda dolupist, sunt voluptae.
</multiline></font>
<font face="'Open Sans', Arial, sans-serif"><singleline lable="Read more"><a href="" style="color: #002855; font-size:12px; font-weight:900; text-decoration: none;">EN SAVOIR PLUS ›</a></singleline></font>
</td>
</tr>
</tbody></table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</tbody></table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</tbody></table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
</layout>
<layout label="Three Column">
<!-- MODULE ROW // -->
<tr>
<td align="center" valign="top">
<!-- CENTERING TABLE // -->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tbody><tr>
<td align="center" valign="top">
<!-- FLEXIBLE CONTAINER // -->
<table class="flexibleContainer" border="0" cellpadding="0" cellspacing="0" width="600">
<tbody><tr>
<td class="flexibleContainerCell" valign="top" width="600">
<!-- CONTENT TABLE // -->
<table class="flexibleContainer" align="Left" border="0" cellpadding="5" cellspacing="0" width="173">
<tbody><tr>
<td class="imageContent" valign="top">
<img src="http://placehold.it/350x150" class="flexibleImage" style="max-width:620px;" width="173" editable="true">
</td>
</tr>
<tr>
<td class="textContent" valign="top">
<font face="'Open Sans', Arial, sans-serif"><multiline lable="Main Text">Erecab ium re plis nimaio quis utempos inullanis imo dent eseque pa id modipie nihitio mo offictasped quasinum re, ne occus denis nus, nosae.</multiline></font>
<font face="'Open Sans', Arial, sans-serif"><multiline lable="Sub Text">
Orita que poreseniae pelignimus imi, ipsus idunt et ant. Cabore omnient ommoditiur apit prorum harchic itatemporrum conet etusanda dolupist, sunt voluptae.
</multiline></font>
<font face="'Open Sans', Arial, sans-serif"><singleline lable="Read more"><a href="" style="color: #002855; font-size:12px; font-weight:900; text-decoration: none;">EN SAVOIR PLUS ›</a></singleline></font>
</td>
</tr>
</tbody></table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table class="flexibleContainer" align="Left" border="0" cellpadding="5" cellspacing="0" width="173">
<tbody><tr>
<td class="imageContent" valign="top">
<img src="http://placehold.it/350x150" class="flexibleImage" style="max-width:620px;" width="173" editable="true">
</td>
</tr>
<tr>
<td class="textContent" valign="top">
<font face="'Open Sans', Arial, sans-serif"><multiline lable="Main Text">Erecab ium re plis nimaio quis utempos inullanis imo dent eseque pa id modipie nihitio mo offictasped quasinum re, ne occus denis nus, nosae.</multiline></font>
<font face="'Open Sans', Arial, sans-serif"><multiline lable="Sub Text">
Orita que poreseniae pelignimus imi, ipsus idunt et ant. Cabore omnient ommoditiur apit prorum harchic itatemporrum conet etusanda dolupist, sunt voluptae.
</multiline></font>
<font face="'Open Sans', Arial, sans-serif"><singleline lable="Read more"><a href="" style="color: #002855; font-size:12px; font-weight:900; text-decoration: none;">EN SAVOIR PLUS ›</a></singleline></font>
</td>
</tr>
</tbody></table>
<!-- // CONTENT TABLE -->
<!-- CONTENT TABLE // -->
<table class="flexibleContainer" align="Left" border="0" cellpadding="5" cellspacing="0" width="173">
<tbody><tr>
<td class="imageContent" valign="top">
<img src="http://placehold.it/350x150" class="flexibleImage" style="max-width:620px;" width="173" editable="true">
</td>
</tr>
<tr>
<td class="textContent" valign="top">
<font face="'Open Sans', Arial, sans-serif"><multiline lable="Main Text">Erecab ium re plis nimaio quis utempos inullanis imo dent eseque pa id modipie nihitio mo offictasped quasinum re, ne occus denis nus, nosae.</multiline></font>
<font face="'Open Sans', Arial, sans-serif"><multiline lable="Sub Text">
Orita que poreseniae pelignimus imi, ipsus idunt et ant. Cabore omnient ommoditiur apit prorum harchic itatemporrum conet etusanda dolupist, sunt voluptae.
</multiline></font>
<font face="'Open Sans', Arial, sans-serif"><singleline lable="Read more"><a href="" style="color: #002855; font-size:12px; font-weight:900; text-decoration: none;">EN SAVOIR PLUS ›</a></singleline></font>
</td>
</tr>
</tbody></table>
<!-- // CONTENT TABLE -->
</td>
</tr>
</tbody></table>
<!-- // FLEXIBLE CONTAINER -->
</td>
</tr>
</tbody></table>
<!-- // CENTERING TABLE -->
</td>
</tr>
<!-- // MODULE ROW -->
</layout>
</repeater>
</table>
<!-- // EMAIL CONTAINER -->
</td>
</tr>
</table>
</center>
</body>
</html>
2 个答案:
答案 0 :(得分：0)
使用嵌套表定义填充，您可以编写如下代码：
编辑过的代码，总是使用嵌套表（尽量避免堆栈表），这里我展示了两个列的布局。使用类似的方法进行3列布局。
<!-- FLEXIBLE CONTAINER // -->
<table class="flexibleContainer" border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td class="flexibleContainerCell" valign="top">
<table class="flexibleContainer" align="left" border="0" cellpadding="0" cellspacing="0" width="560">
<tr>
<!-- left container // -->
<td align="left" valign="top" class="drop_col" style="padding-right:40px;">
<table class="flexibleContainer" border="0" cellpadding="0" cellspacing="0" width="260">
<tr>
left container
</tr>
</table>
</td>
<!-- end of left container // -->
<!-- right container // -->
<td align="left" valign="top" class="drop_col">
<table class="flexibleContainer" border="0" cellpadding="0" cellspacing="0" width="260">
<tr>
right container
</tr>
</table>
</td>
<!-- end of right container // -->
</tr>
</table>
</td>
</tr>
</table>
CSS：
@media only screen and (max-width: 480px){
td[class="drop_col"]{width:100%;float:left;padding-right:0px !important;}
}
答案 1 :(得分：0)
我删除了所有填充并替换为margin-left和margin-right，在所有td元素中重复，这似乎有效。
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？