当html新闻稿发送给收件人时，为什么布局会发生变化？
我的电子邮件html代码，当我通过mailchimp发送时，层被破坏，看起来与正常完全不同。我使用了表格格式，但仍然不起作用。我还使用了基本的mailchimp teplate。但一切都不起作用。我在此附上代码：当html新闻稿发送给收件人时，为什么布局会发生变化？,html,Html,我的电子邮件html代码，当我通过mailchimp发送时，层被破坏，看起来与正常完全不同。我使用了表格格式，但仍然不起作用。我还使用了基本的mailchimp teplate。但一切都不起作用。我在此附上代码： 标题 正文{margin:0；padding:0；字体系列：'Libre Baskerville'，serif；}。主{width:600px；margin:0 auto；display:block；overflow:hidden；}img{width:100%}。徽标{back
标题
正文{margin:0；padding:0；字体系列：'Libre Baskerville'，serif；}。主{width:600px；margin:0 auto；display:block；overflow:hidden；}img{width:100%}。徽标{background:url（img/logo.png）中心不重复；最小高度：100px；边框底部：3px#7a7a7a7a实心}。徽标p{margin top:60px}。标题h1{color:#FF4013；字体大小：68px；页边顶部：15px；文本对齐：居中；页边底部：15px}。副标题p{color:#008CB4；边框顶部：1px#A8A8A8实心；边框底部：1px#A8A8A8实心；填充顶部：15px；填充底部：15px；字体大小：18px；文本对齐：居中；字体样式：斜体}。左侧{float:left；width:36%；背景色：#ebebebeb；padding left:10px；padding right:10px；text align:justify}。left p{字体大小：13px；线条高度：16px}强{线条高度：25px}。left h4{颜色：#008CB4；边框底部：1px虚线#cb4；文本装饰：none}。右{float:right；width:57%；边框左侧：1px实心#b2b2b2b2b2；padding left:10px}{color:#0C8CB4；字体大小：20px}。右p{行高：20px；字体大小：15px}。右img{宽度：100%！重要；}。页脚p{页边距顶部：30px；}。页脚a{页边距顶部：30px；清除：两者；}@media（最大宽度：400px）{标题h1{字体大小：38px；}。右{浮点：无；清除：两者；}。字幕p{字体大小：14px；文本：左对齐；左对齐；{10px；{{字体大小：15px；行高：20px；}
巴拉特陆军通讯
2015年6月
巴拉特军队
《印度板球》季刊
巴拉特军队将于2016年3月前往印度参加T20世界杯。参加巡回赛和体验世界杯的座位有限
1
电子邮件的显示方式取决于呈现方式-所有不同的客户端和平台通常具有令人沮丧的不一致特性。例如，一些电子邮件客户端会完全忽略
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta property="og:title" content="*|MC:SUBJECT|*" />
<title>title</title>
<style type="text/css">
body{margin:0;padding:0;font-family: 'Libre Baskerville', serif;}.main{width:600px;margin:0 auto;display:block;overflow:hidden;}img{width:100%}.logo{background:url(img/logo.png) center center no-repeat;min-height:100px;border-bottom:3px #7A7A7A solid}.logo p{margin-top:60px}.title h1{color:#FF4013;font-size:68px;margin-top:15px;text-align: center;margin-bottom:15px}.subtitle p{color:#008CB4;border-top:1px #A8A8A8 solid;border-bottom:1px #A8A8A8 solid;padding-top:15px;padding-bottom:15px;font-size:18px;text-align:center;font-style:italic}.left{float:left;width:36%;background-color:#EBEBEB;padding-left:10px;padding-right:10px;text-align:justify}.left p{font-size:13px;line-height:16px}strong{line-height:25px}.left h4{color:#008CB4;border-bottom:1px dotted #008CB4;text-decoration:none}.right{float:right;width:57%;border-left:1px solid #B2B2B2;padding-left:10px}.right h2{color:#0C8CB4;font-size:20px}.right p{line-height:20px;font-size:15px}.right img{width: 100%!important;}.footer p{margin-top:30px;}.footer a{margin-top:30px;clear: both;} @media (max-width: 400px) {.title h1{font-size: 38px;}.right{float:none;clear: both;}.subtitle p{font-size: 14px;text-align: left;}.left{width: 55%;padding-left: 10px;} .left p{font-size: 15px; line-height: 20px;}}
</style>
</head>
<body leftmargin="0" marginwidth="0" topmargin="0" marginheight="0" offset="0">
<table border="0" cellpadding="0" cellspacing="0" height="100%" width="100%" id="backgroundTable">
<tr>
<td align="center" valign="top">
<table border="0" cellpadding="0" cellspacing="0" width="600">
<tr>
<td valign="top">
<div class="main">
<div class="logo">
<p style="float:left; color:#008CB4;">The Bharat Army Newsletter</p>
<p style="float:right; color:#008CB4;">June 2015</p>
</div>
<div class="title">
<h1>BHARAT ARMY</h1>
</div>
<div class="subtitle">
<p>Your Quarterly Newsletter for all things Indian Cricket!</p>
</div>
<div class="left">
<p>The Bharat Army will be travelingto India in March 2016 for the T20 World Cup. Limited number of seats will be available to join the tour and experience a World Cup</p>
</div>
<div class="right">
<img src="img/1.png">
<img src="img/2.png">
</div>
<div class="footer">
<a style="color:#008CB4; float:left" href="ex.com">www.ex.com</a>
<p style="color:#008CB4; float:right">1</p>
</div>
</div>
</td>
</tr>
</table>
<br />
</td>
</tr>
</table>
</body>