电子邮件布局 - 从右到左

我一直在试图弄清楚如何获得复制侧和图像侧切换位置。我使用https://templates.mailchimp.com/development/responsive-email/layout-manipulation/作为参考，我明白了，我无法做到这一点。电子邮件布局 - 从右到左

<body> 
<div class="container"> 
<table cellpadding="0" cellspacing="15" align="center" border="0" class="container"> 

<tr> 
      <td align="center"> 
       <table cellpadding="0" cellspacing="0" align="center" border="0" width="100%"> 
        <tr> 
         <td width="40%" valign="center" align="center" class="mobile2" bgcolor="#707249"> 
          <table cellpadding="0" cellspacing="20" align="center" border="0" width="100%"> 
           <tr> 
            <td align="center"><img src="http://www.leejofa.com/emails/images/baker-logo.png" max-width="200px" /></td> 
           </tr> 
           <tr> 
            <td align="center"><span style="font:normal 125% 'Gill Sans', 'Gill Sans MT', Verdana, Arial, sans-serif; color:#FFFFFF">Larkhill</td> 
           </tr> 
           <tr class="desktop"> 
            <td class="desktop">&nbsp;</td> 
           </tr> 
           <tr> 
            <td align="center"><a href="http://search.leejofa.com/itembrowser.aspx?action=attributes&ItemType=WallCovering&resetCrumbs=true&Brand=G%20P%20%26%20J%20Baker&WallCovering%20Collection=Larkhill&offset=0?utm_source=viewcollection&utm_medium=email&utm_content=textlink&utm_campaign=Farrow-Ball-Exit-March-2017" style="font:normal 100% 'Gill Sans', 'Gill Sans MT', Verdana, Arial, sans-serif; color:#FFFFFF">SEARCH COLLECTION <strong style="font:normal 75% Arial, sans-serif">&#9658;</strong></a></td> 
           </tr> 
          </table> 
         </td> 
         <td width="60%" class="mobile2"><a href="http://search.leejofa.com/itembrowser.aspx?action=attributes&ItemType=WallCovering&resetCrumbs=true&Brand=G%20P%20%26%20J%20Baker&WallCovering%20Collection=Larkhill&offset=0?utm_source=viewcollection&utm_medium=email&utm_content=imagelink&utm_campaign=Farrow-Ball-Exit-March-2017"><img src="http://www.leejofa.com/emails/images/larkhill.jpg" alt="Furness Weaves" /></a></td> 
        </tr> 
       </table> 
      </td> 
     </tr> 


     <tr> 
      <td align="center"> 
       <table cellpadding="0" cellspacing="0" align="center" border="0" width="100%"> 
        <tr> 
         <td width="60%" class="mobile2"><a href="http://search.leejofa.com/itembrowser.aspx?action=attributes&ItemType=WallCovering&resetCrumbs=true&Brand=Baker%20Lifestyles&Collection=Denbury&offset=0?utm_source=viewcollection&utm_medium=email&utm_content=textlink&utm_campaign=Farrow-Ball-Exit-March-2017"><img src="http://www.leejofa.com/emails/images/denbury.jpg" alt="Furness Weaves" /></a></td> 
         <td width="40%" valign="center" align="center" class="mobile2" bgcolor="#007DB1"> 
          <table cellpadding="0" cellspacing="20" align="center" border="0" width="100%"> 
           <tr> 
            <td align="center"><img src="http://www.leejofa.com/emails/images/lifestyle-logo.png" max-width="200px" /></td> 
           </tr> 
           <tr> 
            <td align="center"><span style="font:normal 125% 'Gill Sans', 'Gill Sans MT', Verdana, Arial, sans-serif; color:#FFFFFF">Denbury</td> 
           </tr> 
           <tr class="desktop"> 
            <td class="desktop">&nbsp;</td> 
           </tr> 
           <tr> 
            <td align="center"><a href="http://search.leejofa.com/itembrowser.aspx?action=attributes&ItemType=WallCovering&resetCrumbs=true&Brand=Baker%20Lifestyles&Collection=Denbury&offset=0?utm_source=viewcollection&utm_medium=email&utm_content=textlink&utm_campaign=Farrow-Ball-Exit-March-2017" style="font:normal 100% 'Gill Sans', 'Gill Sans MT', Verdana, Arial, sans-serif; color:#FFFFFF">SEARCH COLLECTION <strong style="font:normal 75% Arial, sans-serif">&#9658;</strong></a></td> 
           </tr> 
          </table> 
         </td> 
        </tr> 
       </table> 
      </td> 
     </tr> 
    </table> 
</div> 
</body>

来源

2017-02-23 Tantalizea

您的要求是什么？ – Piyush

添加了移动视图。我试图让第一个副本和图像看起来像第二组。 – Tantalizea

你想让文字出现在左边，像第二组一样？ – Piyush

您可以使用方向的风格标签此：

style="direction:rtl" and style="direction:rtl"

我把你的代码和 1.删除了最后一排（把它作为单独的表格） 2.向表格添加了方向样式和 3.添加了上午EDIA查询，以便您可以测试它

@media only screen and (max-width : 480px) { 
 
table[class].Colms td{display:inline-block; width:100%;} 
 
}

<div class="container"> 
 
    <table cellpadding="0" cellspacing="15" align="center" border="0" class="container"> 
 
    
 
    <tr> 
 
    <td align="center"> 
 
    <table cellpadding="0" cellspacing="0" align="center" border="0" width="100%" style="direction: rtl;" class="Colms"> 
 
    <tr> 
 
    
 
    <td width="60%" class="mobile2" style="direction:ltr"><a href="http://search.leejofa.com/itembrowser.aspx?action=attributes&ItemType=WallCovering&resetCrumbs=true&Brand=G%20P%20%26%20J%20Baker&WallCovering%20Collection=Larkhill&offset=0?utm_source=viewcollection&utm_medium=email&utm_content=imagelink&utm_campaign=Farrow-Ball-Exit-March-2017"><img src="http://www.leejofa.com/emails/images/larkhill.jpg" alt="Furness Weaves" /></a></td> 
 
    <td width="40%" valign="center" align="center" class="mobile2" bgcolor="#707249" style="direction:ltr"> 
 
    <table cellpadding="0" cellspacing="20" align="center" border="0" width="100%"> 
 
    \t <tr> 
 
    \t \t <td align="center"><img src="http://www.leejofa.com/emails/images/baker-logo.png" max-width="200px" /></td> 
 
    \t </tr> 
 
    \t <tr> 
 
    \t \t <td align="center"><span style="font:normal 125% 'Gill Sans', 'Gill Sans MT', Verdana, Arial, sans-serif; color:#FFFFFF">Larkhill</td> 
 
    \t </tr> 
 
    \t <tr class="desktop"> 
 
    \t \t <td class="desktop">&nbsp;</td> 
 
    \t </tr> 
 
    \t <tr> 
 
    \t \t <td align="center"><a href="http://search.leejofa.com/itembrowser.aspx?action=attributes&ItemType=WallCovering&resetCrumbs=true&Brand=G%20P%20%26%20J%20Baker&WallCovering%20Collection=Larkhill&offset=0?utm_source=viewcollection&utm_medium=email&utm_content=textlink&utm_campaign=Farrow-Ball-Exit-March-2017" style="font:normal 100% 'Gill Sans', 'Gill Sans MT', Verdana, Arial, sans-serif; color:#FFFFFF">SEARCH COLLECTION <strong style="font:normal 75% Arial, sans-serif">&#9658;</strong></a></td> 
 
    \t </tr> 
 
    </table> 
 
    </td> 
 
    </tr> 
 
    </table> 
 
    </td> 
 
    </tr> 
 
    </table> 
 
    </div>

的方向是对文本：LTR（左到右）和RLT（从右到左）。表中有rtl，每个td都有ltr。你可以运行上面的代码片段，做全屏幕并看到它的工作。

干杯

来源

2017-02-23 23:24:21 Syfer

真棒，它的工作！对于新来的电子邮件设计人员的任何建议，像我一样？ – Tantalizea

可视化设计并在设计之前考虑局限性。这将节省很多头发拉动。电子邮件有它有趣的时刻和真正烦人的。 – Syfer

电子邮件布局 - 从右到左

回答

相关问题