邮件布局。在响应表中更改tr顺序

Question

我正在为简报创建布局。通常这必须是非常静态的，但我正在使用Mailchimp指南来实现一些响应。它运作良好，但问题是我希望第二个图像出现在文本之前（问题在示例链接中非常明显，很难解释）。基本上我想要实现像使用推拉的Bootstrap一样的东西，例如在调整大小时第二个放置的图像成为第一个。

当布局是单列时，图像然后是文本。

示例：https://codepen.io/SergiOca/pen/vmqMoZ?editors=1010

 @media only screen and (max-width: 480px){
        #templateColumns{
            width:100% !important;
        }
    .templateColumnContainer{
        display:block !important;
        width:100% !important;
    }

    .columnImage{
        height:auto !important;
        max-width:480px !important;
        width:100% !important;
    }

    .leftColumnContent{
        font-size:16px !important;
        line-height:125% !important;
    }

    .rightColumnContent{
        font-size:16px !important;
        line-height:125% !important;
    }
}

<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">

                     <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />

                    </td>
                </tr>

            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                         <p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
                <p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
                    </td>
                </tr>

            </table>
        </td>
    </tr>
</table>



<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">

                      <p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
                <p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>

                    </td>
                </tr>

            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">

                    <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />

                    </td>
                </tr>

            </table>
        </td>
    </tr>
</table>


<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">

                     <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />

                    </td>
                </tr>

            </table>
        </td>
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                         <p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
                <p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
                    </td>
                </tr>

            </table>
        </td>
    </tr>
</table>

Answer 1

你需要我的儿子是生活中的方向。

您可以应用css属性 provisioner "remote-exec" { inline = [ "sudo shutdown -h now", ] } 来交换表格单元格的顺序。 direction可以应用于文本或内联块元素。

您可以采用不同的方式。

Direction

这是代码示例如何应用行或td：

<row dir="rtl">
<td dir="rtl">
.main-content {direction: rtl;  /* Right to Left */}

您可以尝试从父元素继承rtl ot ltr。

我建议在@media查询中为表的类放置方向，以便您可以在移动视图中交换它们。像这样：

<!-- header -->
<container class="header">
  <row dir="rtl">
    <columns large="6" small="12" class="text-right" dir="rtl">
      <p class="text-right" style="color: #432a6f; font-size: 12px; text-decoration: underline;"><a href="<%@ include view='MirrorPageUrl' %>" target="_blank">View this email on the web</a></p>
    </columns>
    <columns large="6" small="12" dir="rtl">
      <a href="http://example.com" target="_blank"><img style="display: inline-block" border="0" alt="Image name" src="http://example.com/sample.png" width="184" height="45"></a>
    </columns>
  </row>
</container>
<!-- .header -->

有关方向的更多信息，请查看： https://css-tricks.com/almanac/properties/d/direction/

祝你好运。

Answer 2

如果你有使用nth-child的自由，那么你可以使用

.templateColumns:nth-child(2n) > tbody > tr > td:nth-child(1){
   float: right;
} 
.templateColumns:nth-child(2n) > tbody > tr > td:nth-child(2){
   float: left;
} 

但你也必须改变标记，要使推拉工作，你需要在左栏和右栏内有相同类型的内容。

我已将类.templateColumns添加到表中 https://codepen.io/srajagop/pen/NjZVpo?editors=1100

注意：所有电子邮件阅读器都不支持nth-child，gmail不支持

Answer 3

这就是你所追求的。我已经拿了一张你的表，给出了如何进行列交换的例子。您需要将两个元素保持在一起才能工作。

此处使用的方法称为混合方法。这两列都是使用包含在td

中的div创建的

<td valign="top" bgcolor="#FFFFFF" class="templateColumnContainer" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px; direction:rtl;">

这个td的方向会告诉div内的每一步都是从右到左（方向：rtl ）

接下来，每个列都使用div来创建，div为容器td的50％宽度。

<div style="width:100%;max-width:280px;display: inline-block; vertical-align: top; direction:ltr;">
</div>

这些div的最大宽度为280像素，宽度为100％，方向设置为从左到右（方向：ltr ）

div内的所有内容都可以编码为100％宽度表。

我添加了人们称之为鬼列的内容。这是Outlook条件语句，告诉outlook这是一个列。

＆＃13;

＆＃13;

 @media only screen and (max-width: 480px){
        #templateColumns{
            width:100% !important;
        }
    .templateColumnContainer{
        display:block !important;
        width:100% !important;
    }

    .columnImage{
        height:auto !important;
        max-width:480px !important;
        width:100% !important;
    }

    .leftColumnContent{
        font-size:16px !important;
        line-height:125% !important;
    }

    .rightColumnContent{
        font-size:16px !important;
        line-height:125% !important;
    }
    .hundred{width:100% !important;}
}

＆＃13;

<table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>
        <td valign="top" bgcolor="#FFFFFF" class="templateColumnContainer" style="padding:0px;text-align: center; vertical-align: top; font-size: 0px; direction:rtl;">

<div style="width:100%;max-width:280px;display: inline-block; vertical-align: top; direction:ltr;">       
             <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent">
                         <p style ="font-size:21px; color:#009DE0; line-height: 22px;"> Selección de profesionales en plantilla o freelance.</p>
                <p style="font-size: 13px; line-height: 19px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
                    </td>
                </tr>

            </table>
            </div>
            <!--[if (gte mso 9)|(IE)]>
</td><td width="50%" align="left" valign="top">
<![endif]-->

<div style="width:100%;max-width:280px; display: inline-block; vertical-align: top; direction:ltr;">       
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent">

                     <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />

                    </td>
                </tr>

            </table> 
            </div>
        </td>
    </tr>
</table>

＆＃13;

＆＃13;

＆＃13;

对于第二行代码，您可以交换div以获得所需的结果。

如果这些内容没有任何意义，或者您希望我进一步解释，请告诉我。

干杯

Answer 4

您可以使用HTML dir attribute操纵布局，不管每列的源顺序是什么。

如果您将电子邮件的格式设置为 on mobile ，则可以使用dir属性更改桌面布局。使用您的代码，这里是一个两列布局的示例，其中图像将上面的堆叠移动文本，但显示在桌面上的右侧列中：

<!-- dir=rtl is where the magic happens (rtl = right to left). This swaps the alignment on wide while maintaining stack order on narrow. -->

<table dir="rtl" border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
    <tr>

        <!-- put this column first in the source order so the image stacks on top of the text on mobile -->
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="rightColumnContent" dir="ltr">
                        <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
                    </td>
                </tr>
            </table>
        </td>

        <!-- put this column first in the source order so the image stacks on top of the text on mobile -->
        <td align="center" valign="top" width="50%" class="templateColumnContainer">
            <table border="0" cellpadding="10" cellspacing="0" width="100%">
                <tr>
                    <td class="leftColumnContent" dir="ltr">
                        <p style ="font-size:21px; color:#009DE0; width: 125px; line-height: 22px;";> Selección de profesionales en plantilla o freelance.</p>
                        <p style="font-size: 13px; line-height: 19px; width: 218px;"> A partir de un Job description acordado con el cliente, procedemos a entrevistar y a validar técnicamente a los candidatos que cumplan con los requisitos técnicos y personales, previamente establecidos.</p>
                    </td>
                </tr>
            </table>
        </td>

    </tr>
</table>

使用现有的媒体查询来堆叠列应该适用于此代码。