响应式HTML电子邮件已失去流动性
我编写了一份响应式HTML简报，该简报基于Salted模板，由Litmus重新发布。
我的电子邮件正在我设置的断点处回流（目前为550像素。）但低于 550，副本没有重新流动，任何不适合550宽度的东西都是隔断。此电子邮件的早期版本未遇到此问题。
我（IMHO）极大地简化了这段代码。我不知道其他什么属性可能会阻止代码重新流动。
#outlook a {
padding: 0;
}
/* Force Outlook to provide a "view in browser" message */
.ReadMsgBody {
width: 100%;
}
.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 */
body,
table,
td,
a {
-webkit-text-size-adjust: 100%;
-ms-text-size-adjust: 100%;
}
/* Prevent WebKit and Windows mobile changing default text sizes */
table,
td {
mso-table-lspace: 0pt;
mso-table-rspace: 0pt;
}
/* Remove spacing between tables in Outlook 2007 and up */
img {
-ms-interpolation-mode: bicubic;
}
/* Allow smoother rendering of resized image in Internet Explorer */
/* RESET STYLES */
body {
margin: 0;
padding: 0;
}
.pre-header {
display: none !important;
display: none !important;
visibility: hidden;
opacity: 0;
color: transparent;
height: 0;
width: 0;
}
img {
border: 0;
height: auto;
line-height: 100%;
outline: none;
text-decoration: none;
}
table {
border-collapse: collapse !important;
}
body {
height: 100% !important;
margin: 0;
padding: 0;
width: 100% !important;
}
/* iOS BLUE LINKS */
.appleBody a {
color: #68440a;
text-decoration: none;
}
.appleFooter a {
color: #999999;
text-decoration: none;
}
/* MOBILE STYLES */
@media screen and (max-width: 550px) {
/* ALLOWS FOR FLUID TABLES */
table[class="wrapper"] {
width: 100% !important;
}
/* ADJUSTS LAYOUT OF LOGO IMAGE */
td[class="logo"] {
text-align: left;
padding: 20px 0 20px 0 !important;
}
td[class="logo"] img {
margin: 0 auto!important;
}
td[class="mobile-copy"] {
padding: 10px 5% 10px 5% !important;
text-align: left !important;
font-size: 112% !important;
line-height: 1.6 !important;
}
/* USE THESE CLASSES TO HIDE CONTENT ON MOBILE */
td[class="mobile-hide"] {
display: none;
}
img[class="mobile-hide"] {
display: none !important;
}
img[class="img-max"] {
max-width: 100% !important;
height: auto !important;
}
/* FULL-WIDTH TABLES */
table[class="responsive-table"] {
width: 100%!important;
}
/* UTILITY CLASSES FOR ADJUSTING PADDING ON MOBILE */
td[class="padding"] {
padding: 10px 5% 15px 5% !important;
}
td[class="padding-copy"] {
padding: 10px 5% 10px 5% !important;
text-align: left !important;
}
td[class="padding-meta"] {
padding: 30px 5% 0px 5% !important;
text-align: left;
}
td[class="padding-adjust"] {
padding: 0px 0px 15px 15px !important;
}
td[class="padding-stories"] {
padding: 10px 5% 30px 5% !important;
text-align: left !important;
font-size: 112% !important;
line-height: 1.6 !important;
}
td[class="no-pad"] {
padding: 0 0 0 0 !important;
}
td[class="no-padding"] {
padding: 0 !important;
}
td[class="section-padding"] {
padding: 15px 15px 15px 15px !important;
}
td[class="hero-padding"] {
padding: 0px 15px 50px 15px !important;
}
td[class="section-padding-bottom-image"] {
padding: 50px 15px 0 15px !important;
}
td[class="responsive-deadline"] {
width: 100% !important;
display: block !important;
padding: 15px 0px 0px 15px !important;
}
/* ADJUST BUTTONS ON MOBILE */
td[class="mobile-wrapper"] {
padding: 10px 5% 15px 5% !important;
}
table[class="mobile-button-container"] {
padding: 0px !important;
padding-left: 5%;
width: 100% !important;
}
a[class="mobile-button"] {
font-size: 120% !important;
}
}<body style="margin: 0; padding: 0;">
<table width="100%">
<tr>
<td align="center">
<span style="text-align:center;font-size:6px;font-family:verdana,sans-serif;display:none !important; visibility:hidden; opacity:0; color:transparent; height:0; width:0;" class="pre-header">ENTER TEXT HERE</span>
<!--
----
----
----
Header
----
----
----
-->
<table>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="550" class="wrapper">
<tr>
<td align="left">
<a href="http://www8.gsb.columbia.edu" target="_blank">
<img src="http://i.imgur.com/fergJuw.png" width="550" border="0" alt="Columbia Business School - Image" style="display: block; padding: 0; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; width: 550px; height: auto;"
class="img-max">
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--
----
----
----
Main Story
----
----
----
-->
<table>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="550" class="wrapper">
<tr>
<td align="left" style="padding: 40px 0 0 0; font-size: 16px; line-height: 160%; font-family: Helvetica, Arial, sans-serif; color: #212121;" class="mobile-copy"><span style="font-size:24px; font-weight:bold; color: #444444;">This is an example of a headline.</span>
<br />
<br />An extraordinary sense of community is at the very center of Columbia's MBA experience. No matter which EMBA track you're on, you will develop strong bonds — both personally and professionally — with your classmates.
<br />
<br />It starts at orientation when the incoming class is put into carefully selected clusters and learning teams. You'll move together through the core curriculum with your cluster, creating a tight-knit sense of community, even if you're
only on campus a few days a month. Your team will help you get through tough case studies, offer advice about dealing with your new boss, and travel with you across the world.
<br />
<br />Hear about the strong culture of community from the students themselves, or experience the Columbia MBA community firsthand by joining us at one of our upcoming events.</td>
</tr>
<!-- BULLETPROOF BULLET -->
<tr>
<td align="left" style="padding-top:20px;" class="mobile-wrapper"><a href="https://litmus.com/email-community" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #000000; text-decoration: none; background-color: #99cc33; border-top: 10px solid #99cc33; border-bottom: 10px solid #99cc33; border-left: 18px solid #99cc33; border-right: 18px solid #99cc33; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;"
class="mobile-button" align="center">Register Now</a>
</td>
</tr>
<!-- END BULLETPROOF BUTTON -->
</table>
</td>
</tr>
</table>
<!--
----
----
----
Two Up
----
----
----
-->
<table>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="550" class="wrapper">
<tr>
<td style="padding-top:60px;">
<img src="http://i.imgur.com/lPbvrmP.png" width="181" height="auto" border="0" alt="EMBA Insider" style="display: block; padding: 0px 0px 20px 0px; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; width: 181; height: auto;"
class="img-max">
</td>
</tr>
<!--
----
----
FIRST ROW FIRST ROW FIRST ROW
----
----
-->
<tr>
<td style="padding-bottom:60px;" class="no-pad">
<table width="49%" align="left" class="responsive-table">
<tr>
<td align="left" bgcolor="#ffffff" valign="middle" class="img-max">
<a href="http://www8.gsb.columbia.edu" target="_blank">
<img src="http://www8.gsb.columbia.edu/programs-admissions/sites/programs-admissions/files/images/1.jpg" width="100%" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 100%;" alt="Fluid images" border="0"
class="img-max">
</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #0081cc; font-size: 28px;" class="padding-copy">Testing</td>
</tr>
<tr>
<td align="left" style="padding: 4px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 16px; line-height:22px;" class="padding-stories">It's not about the money, says Professor Joseph Stiglitz, Columbia Business School's resident Nobel laureate. It's about forcing Greece to buckle under.</td>
</tr>
</table>
<table width="49%" align="right" class="responsive-table">
<tr>
<td align="left" bgcolor="#ffffff" valign="middle">
<a href="http://www8.gsb.columbia.edu" target="_blank">
<img src="http://www8.gsb.columbia.edu/programs-admissions/sites/programs-admissions/files/images/1.jpg" width="100%" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 100%;" alt="Fluid images" border="0"
class="img-max">
</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #0081cc; font-size: 28px;" class="padding-copy">Testing</td>
</tr>
<tr>
<td align="left" style="padding: 4px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 16px; line-height:22px;" class="padding-stories">Catalin Obogeanu '15 EMBA explains the strong culture of community at Columbia Business School and how it impacts the CBS experience.</td>
</tr>
</table>
</td>
</tr>
<!--
----
----
SECOND ROW SECOND ROW SECOND ROW
----
----
-->
<tr>
<td>
<table width="49%" align="left" class="responsive-table">
<tr>
<td align="left" bgcolor="#ffffff" valign="middle">
<a href="http://www8.gsb.columbia.edu" target="_blank">
<img src="http://www8.gsb.columbia.edu/programs-admissions/sites/programs-admissions/files/images/1.jpg" width="100%" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 100%;" alt="Fluid images" border="0"
class="img-max">
</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #0081cc; font-size: 28px;" class="padding-copy">Testing</td>
</tr>
<tr>
<td align="left" style="padding: 4px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 16px; line-height:22px;" class="padding-stories">For the past decade, Ideas at Work has connected the groundbreaking research conducted by Columbia Business School faculty to the world of business practitioners. Join us as we look back at a few highlights from the past ten years.</td>
</tr>
</table>
<table width="49%" align="right" class="responsive-table">
<tr>
<td align="left" bgcolor="#ffffff" valign="middle">
<a href="http://www8.gsb.columbia.edu" target="_blank">
<img src="http://www8.gsb.columbia.edu/programs-admissions/sites/programs-admissions/files/images/1.jpg" width="100%" style="display: block; color: #666666; font-family: Helvetica, arial, sans-serif; font-size: 13px; width: 100%;" alt="Fluid images" border="0"
class="img-max">
</a>
</td>
</tr>
<tr>
<td align="left" style="padding: 15px 0 0 0; font-family: Arial, sans-serif; color: #0081cc; font-size: 28px;" class="padding-copy">Testing</td>
</tr>
<tr>
<td align="left" style="padding: 4px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 16px; line-height:22px;" class="padding-stories">Arun Jaitley, India's minister of finance, offers a no-holds-barred perspective on how far India has come — and what still needs to be done. Minister Jaitley's June 2015 speech was sponsored by the India Business Initiative at
the Chazen Institute of International Business at Columbia Business School. Watch more.</td>
</tr>
</table>
</td>
</tr>
<!-- BULLETPROOF BULLET -->
<tr>
<td align="left" style="padding-top:20px;" class="mobile-wrapper"><a href="https://litmus.com/email-community" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #0081cc; border-top: 10px solid #0081cc; border-bottom: 10px solid #0081cc; border-left: 18px solid #0081cc; border-right: 18px solid #0081cc; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;"
class="mobile-button" align="center">Register Now</a>
</td>
</tr>
<!-- END BULLETPROOF BUTTON -->
</table>
</td>
</tr>
</table>
<!--
----
----
----
Event Listing
----
----
----
-->
<table>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="550" class="">
<tr>
<td style="padding-top:60px;">
<img src="http://i.imgur.com/JEcrMA7.png" width="181" height="auto" border="0" alt="EMBA Insider" style="display: block; padding: 0px 0px 0px 0px; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; width: 181px; height: auto;"
class="img-max">
</td>
</tr>
<tr>
<td style="padding-top:20px;">
<table width="49%" align="left" class="responsive-table">
<tr>
<td align="left" style="padding: 4px 0 0 0; font-family: Arial, sans-serif; color: #A0535D; font-size: 20px;" class="padding-copy">Special Event:
<br />EMBA Career Management</td>
</tr>
</table>
<table width="49%" align="right" class="responsive-table">
<tr>
<td align="left" style="padding: 4px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 16px;" class="padding-copy">Saturday, April 4
<br />Columbia University's Campus,
<br />10:30 a.m.–12:00 p.m</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top:40px;">
<table width="49%" align="left" class="responsive-table">
<tr>
<td align="left" style="padding: 4px 0 0 0; font-family: Arial, sans-serif; color: #A0535D; font-size: 20px;" class="padding-copy">Special Event:
<br />EMBA Career Management</td>
</tr>
</table>
<table width="49%" align="right" class="responsive-table">
<tr>
<td align="left" style="padding: 4px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 16px;" class="padding-copy">Saturday, April 4
<br />Columbia University's Campus,
<br />10:30 a.m.–12:00 p.m</td>
</tr>
</table>
</td>
</tr>
<tr>
<td style="padding-top:40px;">
<table width="49%" align="left" class="responsive-table">
<tr>
<td align="left" style="padding: 4px 0 0 0; font-family: Arial, sans-serif; color: #A0535D; font-size: 20px;" class="padding-copy">Special Event:
<br />EMBA Career Management</td>
</tr>
</table>
<table width="49%" align="right" class="responsive-table">
<tr>
<td align="left" style="padding: 4px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 16px;" class="padding-copy">Saturday, April 4
<br />Columbia University's Campus,
<br />10:30 a.m.–12:00 p.m</td>
</tr>
</table>
</td>
</tr>
<!-- BULLETPROOF BULLET -->
<tr>
<td align="left" style="padding-top:20px; padding-bottom:0px;" class="mobile-wrapper"><a href="https://litmus.com/email-community" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #A0535D; border-top: 10px solid #A0535D; border-bottom: 10px solid #A0535D; border-left: 18px solid #A0535D; border-right: 18px solid #A0535D; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;"
class="mobile-button" align="center">Register Now</a>
</td>
</tr>
<!-- END BULLETPROOF BUTTON -->
</table>
</td>
</tr>
</table>
<!--
----
----
----
Deadlines
----
----
----
-->
<table>
<tr>
<td>
<table border="0" cellpadding="0" cellspacing="0" width="550" class="wrapper">
<tr>
<td style="padding-top:60px;">
<img src="http://i.imgur.com/XEoCfdz.png" width="181" height="auto" border="0" alt="EMBA Insider" style="display: block; padding: 0px 0px 0px 0px; color: #666666; text-decoration: none; font-family: Helvetica, arial, sans-serif; font-size: 16px; width: 181px; height: auto;"
class="img-max">
</td>
</tr>
<tr>
<td style="padding-top:20px;">
<table width="49%" align="left" class="responsive-table">
<tr>
<td align="left" style="padding: 4px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 16px;" class="padding-copy"><span style="color:#F7B446;">EMBA-New York Application Deadline</span>
<br />January 30, 2015</td>
</tr>
</table>
<table width="49%" align="right" class="responsive-table">
<tr>
<td align="left" style="padding: 4px 0 0 0; font-family: Arial, sans-serif; color: #666666; font-size: 16px;" class="padding-copy"><span style="color:#F7B446;">EMBA-New York Application Deadline</span>
<br />January 30, 2015</td>
</tr>
</table>
</td>
</tr>
<!-- BULLETPROOF BULLET -->
<tr>
<td align="left" style="padding-top:20px; padding-bottom:40px;" class="mobile-wrapper"><a href="https://litmus.com/email-community" target="_blank" style="font-size: 15px; font-family: Helvetica, Arial, sans-serif; font-weight: normal; color: #ffffff; text-decoration: none; background-color: #F7B446; border-top: 10px solid #F7B446; border-bottom: 10px solid #F7B446; border-left: 18px solid #F7B446; border-right: 18px solid #F7B446; border-radius: 3px; -webkit-border-radius: 3px; -moz-border-radius: 3px; display: inline-block;"
class="mobile-button" align="center">Register Now</a>
</td>
</tr>
<!-- END BULLETPROOF BUTTON -->
</table>
</td>
</tr>
</table>
<!--
----
----
----
Social Media
----
----
----
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="middle" style="font-size: 11px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;" class="section-padding-bottom-image">
<a href="">
<img src="http://www8.gsb.columbia.edu/programs-admissions/sites/programs-admissions/files/images/fb2.gif" width="60" height="auto" alt="Facebook" border="0" class="img-max" />
</a>
<a href="">
<img src="http://www8.gsb.columbia.edu/programs-admissions/sites/programs-admissions/files/images/tw2.gif" width="60" height="auto" alt="Twitter" border="0" class="img-max" />
</a>
<a href="">
<img src="http://www8.gsb.columbia.edu/programs-admissions/sites/programs-admissions/files/images/yt2.gif" width="60" height="auto" alt="YouTube" border="0" class="img-max" />
</a>
<a href="">
<img src="http://i.imgur.com/ZtccQLc.gif" width="60" height="auto" alt="LinkedIn" border="0" class="img-max" />
</a>
<a href="">
<img src="http://i.imgur.com/f0Lj9V3.gif" width="60" height="auto" alt="Instagram" border="0" class="img-max" />
</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--
----
----
----
Copyright
----
----
----
-->
<table border="0" cellpadding="0" cellspacing="0" width="100%">
<tr>
<td align="center">
<table width="550" border="0" cellspacing="0" cellpadding="0" align="center" class="responsive-table">
<tr>
<td align="center" valign="middle" style="padding-top:40px; padding-bottom:40px; font-size: 11px; line-height: 18px; font-family: Helvetica, Arial, sans-serif; color:#666666;"><span class="appleFooter" style="color:#666666;">Columbia Business School</span>
<br>
<a class="original-only" style="color: #666666; text-decoration: none;">Privacy Statement</a><span class="original-only" style="font-family: Arial, sans-serif; font-size: 12px; color: #444444;"> | </span>
<a style="color: #666666; text-decoration: none;">©2015 Columbia University</a><span class="original-only" style="font-family: Arial, sans-serif; font-size: 12px; color: #444444;"> | </span>
<a style="color: #666666; text-decoration: none;">3022 Broadway New York, NY 10027 212-854-5553</a>
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- END COPYRIGHT FOOTER -->
</td>
</tr>
</table>
1 个答案:
答案 0 :(得分：0)
我发现你的错误...你在桌子上缺少宽度= 550的类，它是
中带有此图像的类。
require([
'dstore/Memory'
], function (Memory) {
var store = new Memory({ data: [
{ id: 1, name: 'abc' },
{ id: 2, name: 'xyz' }
] });
store.get(1).then(function (data) {
console.log(data.name);
});
});
如果你把它设置为class =＆＃34; wrapper＆＃34;它有效：）
相关问题
最新问题
- 我写了这段代码，但我无法理解我的错误
- 我无法从一个代码实例的列表中删除 None 值，但我可以在另一个实例中。为什么它适用于一个细分市场而不适用于另一个细分市场？
- 是否有可能使 loadstring 不可能等于打印？卢阿
- java中的random.expovariate()
- Appscript 通过会议在 Google 日历中发送电子邮件和创建活动
- 为什么我的 Onclick 箭头功能在 React 中不起作用？
- 在此代码中是否有使用“this”的替代方法？
- 在 SQL Server 和 PostgreSQL 上查询，我如何从第一个表获得第二个表的可视化
- 每千个数字得到
- 更新了城市边界 KML 文件的来源？