我已将以下所有代码发布到我的电子邮件广告系列中。出于某种原因，“浮动”属性在Gmail和Yahoo中不起作用，所以我想知道是否有办法使用“浮动”，以便它在电子邮件中显示格式很好。谢谢！
<!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 http-equiv="Content-Type" content="text/html; charset=utf-8">
<title></title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
</head>
<body style="background-color: #f3f4f5; margin:0px;">
<div style="width:600px; margin:0px auto;">
<div style="width:100%; float:left; box-shadow: 0 0 12px #CCCCCC;margin-top: 70px;">
<div style="width:94%; float:left;padding:32px 3%;background-color:#0078ae;">
<a href="http://realscout.com"><img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/logo.png" style="max-width:100%;">
</a></div>
<div style="width:94%; height: 50%; float:left;padding:0px 3%;
position:relative;
background: #ffffff; /* Old browsers */
/* IE9 SVG, needs conditional override of 'filter' to 'none' */
background: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiA/Pgo8c3ZnIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgd2lkdGg9IjEwMCUiIGhlaWdodD0iMTAwJSIgdmlld0JveD0iMCAwIDEgMSIgcHJlc2VydmVBc3BlY3RSYXRpbz0ibm9uZSI+CiAgPGxpbmVhckdyYWRpZW50IGlkPSJncmFkLXVjZ2ctZ2VuZXJhdGVkIiBncmFkaWVudFVuaXRzPSJ1c2VyU3BhY2VPblVzZSIgeDE9IjAlIiB5MT0iMCUiIHgyPSIwJSIgeTI9IjEwMCUiPgogICAgPHN0b3Agb2Zmc2V0PSIwJSIgc3RvcC1jb2xvcj0iI2ZmZmZmZiIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjUwJSIgc3RvcC1jb2xvcj0iI2Y0ZjRmNCIgc3RvcC1vcGFjaXR5PSIxIi8+CiAgICA8c3RvcCBvZmZzZXQ9IjEwMCUiIHN0b3AtY29sb3I9IiNlYmViZWIiIHN0b3Atb3BhY2l0eT0iMSIvPgogIDwvbGluZWFyR3JhZGllbnQ+CiAgPHJlY3QgeD0iMCIgeT0iMCIgd2lkdGg9IjEiIGhlaWdodD0iMSIgZmlsbD0idXJsKCNncmFkLXVjZ2ctZ2VuZXJhdGVkKSIgLz4KPC9zdmc+);
background: -moz-linear-gradient(top, #ffffff 0%, #f4f4f4 50%, #ebebeb 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%,#ffffff), color-stop(50%,#f4f4f4), color-stop(100%,#ebebeb)); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, #ffffff 0%,#f4f4f4 50%,#ebebeb 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, #ffffff 0%,#f4f4f4 50%,#ebebeb 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, #ffffff 0%,#f4f4f4 50%,#ebebeb 100%); /* IE10+ */
background: linear-gradient(to bottom, #ffffff 0%,#f4f4f4 50%,#ebebeb 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#ebebeb',GradientType=0 ); /* IE6-8 */
">
<h1 style="color: #0078AD;font-family: verdana;font-size: 28px;font-weight: normal;line-height: 28px;margin: 0;padding: 24px 0 12px;">A Real Success Story!</h1>
<p style="color: #7F8182;font-family: verdana;font-size: 14px;line-height: 24px;margin: 0;padding: 0;width: 45%;">"We LOVE RealScout! Through its simplistic approach of capturing clients to its personalized search criteria, we have been able to connect with lead generated clients better and faster than any other service we have ever used in the past. Within one month we have turned two leads into actual clients in escrow and have about 15 clients using the website on a weekly basis...this is a no brainer, go with RealScout!"</p>
<a href="http://pro.realscout.com" style="background-color: #56B900;border: medium none;border-radius: 5px;color: #FEFFFF;float: left;font-family: verdana;font-size: 18px;margin: 20px 0 35px;padding: 17px 15px;text-decoration: none;">Your Success Begins Here!</a>
<img src="http://i43.tinypic.com/2jahngh.jpg" style="margin-top: -306px; margin-left: 15px;">
<span style=" background-color:#ffffff;color: #0078ad; font-family: verdana; font-size: 14px; position: relative; right:-70px; opacity: 0.8;padding: 3px 3px; text-transform: capitalize;">Heidi and Michael Syltebo
</span></div>
<div style="width:94%; float:left;padding:30px 3% 30px;position:relative;background-color:#f8f8f9;">
<img src="http://www.image-maps.com/m/private/0/rjaq100u38u699nf8ckn583c14_home.png" style="max-width:48%;float: left;margin:0px 4% 0px 0px;">
<h1 style="color: #0078AE;float:left;font-family: verdana;font-size: 22px;font-weight: normal;margin: 0 0 8px 0;width: 48%;">Social Media Tip</h1>
<p style="color: #7F8182;float: left;font-family: verdana;font-size: 14px;line-height: 22px; margin: 0;padding: 0;width: 48%;">Generate more leads and increase the traffic to your RealScout search portal by posting your personal links on Facebook, Linkedin, Twitter, etc. and inviting your audience to search with you on RealScout.</p>
<a href="http://" style="background-color: #06AEEC;border: medium none;border-radius: 5px;color: #FEFFFF;float: left;font-family: verdana;font-size: 18px;margin: 12px 0 0;padding: 20px 25px;text-decoration: none;">Get Your Links</a>
</div>
<div style="width:94%; float:left;padding:30px 3% 30px;position:relative;background-color:#f8f8f9;">
<img src="http://www.image-maps.com/m/private/0/rjaq100u38u699nf8ckn583c14_website-manager.png" style="max-width:48%;float: left;margin:0px 4% 0px 0px;">
<h1 style="color: #0078AE;float:left;font-family: verdana;font-size: 22px;font-weight: normal;margin: 0 0 8px 0;width: 48%;">New Feature Upgrade!</h1>
<p style="color: #7F8182;float: left;font-family: verdana;font-size: 14px;line-height: 22px; margin: 0;padding: 0;width: 48%;">Now you can manage your RealScout Website right on RealScout Pro by clicking "Manage My RealScout Website" on your Agent Dashbord.</p>
<a href="http://www.buzzfeed.com/ryanhatesthis/this-guy-spent-the-last-month-dressing-up-like-local-realtor" style="background-color: #06AEEC;border: medium none;border-radius: 5px;color: #FEFFFF;float: left;font-family: verdana;font-size: 18px;margin: 12px 0 0;padding: 20px 25px;text-decoration: none;"> Read More </a>
</div>
<div style="width:94%; float:left;padding:30px 3% 30px;position:relative;background-color:#f8f8f9;">
<img src="http://www.image-maps.com/m/private/0/rjaq100u38u699nf8ckn583c14_enhanced-buzz-21288-1387234916-3.jpg" style="max-width:48%;float: left;margin:0px 4% 0px 0px;">
<h1 style="color: #0078AE;float:left;font-family: verdana;font-size: 22px;font-weight: normal;margin: 0 0 8px 0;width: 48%;">Real Comedy</h1>
<p style="color: #7F8182;float: left;font-family: verdana;font-size: 14px;line-height: 22px; margin: 0;padding: 0;width: 48%;">Artist and designer Phil Jones spent the last month dressing up as local real estate agents and pasting himself over their bench ads.</p>
<a href="http://www.buzzfeed.com/ryanhatesthis/this-guy-spent-the-last-month-dressing-up-like-local-realtor" style="background-color: #06AEEC;border: medium none;border-radius: 5px;color: #FEFFFF;float: left;font-family: verdana;font-size: 18px;margin: 12px 0 0;padding: 20px 25px;text-decoration: none;"> Laugh More </a>
</div>
<div style="width:100%;float:left;position:relative; margin-top: 0px;">
<a href="https://itunes.apple.com/us/app/real-estate-by-realscout-search/id744305884?mt=8"><img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/new.png" style="margin:-6px 0px 0px -6px;">
</a><a href="https://itunes.apple.com/us/app/real-estate-by-realscout-search/id744305884?mt=8"><img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/slider.jpg" style="float: left;margin-top: -119px;width: 100%;">
<div style="background-color: #FFFFFF;bottom: 45px;float: right;margin: -140px 0 0;padding: 15px 25px;width: 41%;">
<h1 style="color: #06AEEC;float: left;font-family: verdana;font-size: 16px;font-weight: normal;margin: 0 0 10px;text-transform: capitalize;width: 100%;">Save Searches Across Devices</h1>
<p style="color: #7F8182;float: left;font-family: verdana;font-size: 13px;line-height: 23px; margin: 0;padding: 0;width: 100%;">RealScout is compatible with all your
desktop and mobile devices.</p>
</div>
</a></div>
<ul style="background-color: #FFFFFF;float: left;margin: 0;padding: 40px 0 0;text-align: center;width: 100%;">
<li style="float: left;list-style: none outside none; padding: 0 1% 40px;width: 31%;">
<img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/border_bg.png" style="float: right;margin: 0 -7px 0 0;">
<img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/icon1.png" style="height: 49px;">
<h1 style="color: #484848;font-family: verdana;font-weight: normal;margin:10px 0;font-size: 18px;">30 Days Free</h1>
<p style="color: #BCBCBC;font-family: verdana;font-size: 12px;margin:0px 0px 10px;">Refer 2 Realtors and get an extra 30 days free!*</p>
<a href="mailto:sales@realscout.com" style="color: #0881B4;font-family: verdana;font-size: 12px;text-decoration: none;margin:10px 0px;">Referring is easy - Try it now!</a>
</li>
<li style="float: left;list-style: none outside none; padding: 0 1% 40px;width: 31%;">
<img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/border_bg.png" style="float: right;margin: 0 -7px 0 0;">
<img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/icon2.png" style="height: 49px;">
<h1 style="color: #484848;font-family: verdana;font-weight: normal;margin:10px 0;font-size: 18px;">Contact Us</h1>
<p style="color: #BCBCBC;font-family: verdana;font-size: 12px;margin:0px 0px 10px;">We're here to help answer your questions.</p>
<a href="mailto:support@realscout.com" style="color: #0881B4;font-family: verdana;font-size: 12px;text-decoration: none;margin:10px 0px;">Reply or Call (650) 397-6500</a>
</li>
<li style="float: left;list-style: none outside none; padding: 0 1% 40px;width: 31%;">
<img src="http://gallery.mailchimp.com/0b32d9562fc9af3777504e182/images/icon3.png" style="height: 49px;">
<h1 style="color: #484848;font-family: verdana;font-weight: normal;margin:10px 0;font-size: 18px;">FAQ</h1>
<p style="color: #BCBCBC;font-family: verdana;font-size: 12px;margin:0px 0px 10px;">Have other questions?</p>
<span href="support.realscout.com" style="color: #0881B4;font-family: verdana;font-size: 12px;margin:10px 0px;"><a href="http://support.realscout.com" style="color: #0881B4;font-family: verdana;font-size: 12px;text-decoration: none;margin:10px 0px;">Visit our support center for FAQ's and video tutorials.</a></span>
</li>
</ul></div>
<p style="color: #0078AD;float: left;font-family: verdana;font-size: 12px;margin: 50px 0 15px;text-align: center;width: 100%;">*Recieve an extra 30 days FREE when you refer 2 Realtors who sign up on RealScout!</p>
<span style="color: #A2A2A3;float: left;font-family: arial;margin: 0 0 35px;text-align: center;width: 100%;font-size: 14px;">Copyright ©2014 RealScout. All Rights Reserved. <a href="#" style="color: #A2A2A3;">Unsubscribe</a></span>
</div>
</body>
</html>
答案 0 :(得分：0)
浮动的方式是转向表格。
如果您想要一些示例，可以查看Mailchimp's Templates
他们甚至有一些很酷的响应模板。
这也可以帮助您了解对css ... http://templates.mailchimp.com/resources/email-client-css-support/
的电子邮件支持**注意：我不是故意推广Mailchimp，因为我没有附属，但在电子邮件方面确实有一些很好的参考
答案 1 :(得分：0)
许多电子邮件客户端仍然会删除浮点数，负边距以及头标记中包含的任何CSS。有些人还添加了自己的CSS，可以替换你的全部或部分。您可以做的最好的事情是提前计划设计可以在不支持或不完全支持CSS的浏览器中优雅降级的电子邮件，以及测试，测试和测试。或者，有一些很好的电子邮件模板。 Mailchimp - 正如其他人所说 - 是一个很好的资源。
对于浮点数，在尝试表格之前，请尝试添加“text-align：left;”到父元素。这可能会使您的对齐接近正确。
如果你必须移动到表格，你可以向单元格添加类，并在头部设置td's显示为带有浮点数的内联块。
（顺便说一句，jsFiddle会帮助其他人看到你的代码如何表现并调整它。它有助于更容易地给出准确的答案。）