メールのレイアウト - 右から左

私は、コピー側とイメージ側が場所を切り替える方法を理解しようとしています。私は参照のために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

モバイルビューが追加されました。私は最初のコピーとイメージを2番目のセットのように見せようとしています。 – Tantalizea

2番目のセットのように、テキストを左側に、イメージを右側に表示しますか？ – Piyush

：

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

私はあなたのコードを取り、 1.最後の行を削除しました（ように置きます別表） 2.表に方向スタイルを追加しました。 3. amを追加しましたあなたはそれ

@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>

テストできるようにEDIAクエリ方向がテキストのためのものです：LTR（左から右）と（右から左）RLT。テーブルにはrtlがあり、tdにはltrがあります。上記のスニペットを実行して、フルスクリーンで表示して動作させることができます。

乾杯

出典

2017-02-23 23:24:21 Syfer

素晴らしいです、それは働いた！自分自身のようにメールでデザインをしている人のためのアドバイスはありますか？ – Tantalizea

デザインを視覚化し、設計する前にその限界について考える。それは多くの髪を引っ張って保存します。電子メールは楽しい瞬間と本当に迷惑なものを持っています。 – Syfer

メールのレイアウト - 右から左

答えて

関連する問題