電子郵件佈局 - 從右到左

我一直在試圖弄清楚如何獲得複製側和圖像側切換位置。我使用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

電子郵件佈局 - 從右到左

回答

相關問題