Float:Left и Position не работают для почтовой кампании

Question

Float:Left и Position не работают для почтовой кампании

У меня есть весь приведенный ниже код для моей почтовой кампании. По какой-то причине атрибут "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>

0

html css css-float mailchimp

Источник

user3312119 18 фев '14 в 05:09

2 ответа

Другие вопросы по тегам html css css-float mailchimp

user552993 18 фев '14 в 05:16 2014-02-18 05:16 · Answer 1 · 2014-02-18 05:16

Способ обойти поплавки - обратиться к столам.

Если вам нужны примеры, вы можете посмотреть шаблоны Mailchimp

У них даже есть несколько крутых адаптивных шаблонов.

Это также может помочь вам понять поддержку по электронной почте для css... http://templates.mailchimp.com/resources/email-client-css-support/

** Примечание: я не имею в виду продвижение Mailchimp, поскольку я не являюсь аффилированным лицом, но у них есть несколько хороших ссылок, когда дело доходит до электронной почты

user1224692 18 фев '14 в 06:37 2014-02-18 06:37 · Answer 2 · 2014-02-18 06:37

Многие почтовые клиенты по-прежнему удаляют плавающие числа, отрицательные поля и любой CSS-код, включенный в тег head. Некоторые также добавляют свой собственный CSS, который может заменить весь или часть вашего. Лучшее, что вы можете сделать, - это заранее планировать разработку писем, которые могут изящно ухудшаться в браузерах, которые не поддерживают или не полностью поддерживают CSS, и тестировать, тестировать, тестировать. Кроме того, есть несколько хороших шаблонов электронной почты. Mailchimp - это, как отмечают другие, отличный ресурс.

Для поплавков, прежде чем пытаться использовать таблицы, попробуйте добавить "text-align: left;" на родительский элемент. Это может привести ваше выравнивание близко к правильному.

Если вам нужно перейти к таблицам, вы можете добавить классы в ячейки и в заголовке установить td для отображения в виде inline-блоков с плавающей точкой.

(Кроме того, jsFiddle поможет другим увидеть, как ваш код ведет себя и настроить его. Это помогает упростить точный ответ.)