个人中心
gpt4 book ai didi

html - float :Left and Position not working for email campaign

转载 作者：行者123 更新时间：2023-11-28 11:13:54 27 4
gpt4 key购买 nike

我在下面发布了我的电子邮件事件的所有代码。由于某种原因，“float”属性在 Gmail 和 Yahoo 中不起作用，所以我想知道是否有办法绕过使用“float”，以便它在电子邮件中显示得很好。谢谢!

    <!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;">&nbsp;&nbsp;Read More&nbsp;&nbsp;&nbsp;</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;">&nbsp;&nbsp;Laugh More&nbsp;&nbsp;</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>

最佳答案

绕过 float 的方法是转向表格。

如果您想要一些示例，可以查看 Mailchimp's Templates

他们甚至有一些很酷的响应式模板。

这也可以帮助您了解电子邮件对 css 的支持... http://templates.mailchimp.com/resources/email-client-css-support/

** 注意:我并不是要宣传 Mailchimp，因为我不属于任何附属机构，但他们在电子邮件方面确实有一些很好的引用

关于html - float :Left and Position not working for email campaign，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/21844847/

27 4 0
文章推荐： jquery - 当段落到达 Div 底部时创建新列
文章推荐： ios - 使用 swift 从默认系统图标创建 UIImage
文章推荐： jquery - 图像 slider 中的元素符号导航
文章推荐： javascript - 强制页面在顶部加载 + 页面加载时禁用滚动
行者123
个人简介

我是一名优秀的程序员,十分优秀！

滴滴打车优惠券免费领取
滴滴打车优惠券
全站热门文章
Copyright 2021 - 2024 cfsdn All Rights Reserved 蜀ICP备2022000587号
广告合作:1813099741@qq.com 6ren.com