在Zurb INK推拉桌

Question

在我创建的INK HTML简报中，我有一行分为2个表，每个表有六列。左表是文本，右边是图像。当在移动设备上阅读电子邮件时，我希望首先显示图像，并在图像下方显示文本。在Zurb Foundation（对于Sites），可以使用推拉来完成。有没有办法在INK中达到同样的效果。由于INK使用表格，问题将是交换表格单元格。我尝试使用Foundation中的代码创建内联CSS以进行推送和拉取，但它只是将单元格内容向右或向左移动（预期）

Answer 1

您可以使用a solution自己添加此功能。我想了一会儿。

技巧是dir参数来控制列的显示方式。

<table class="row" dir="rtl" >
  <tr>
    <td class="wrapper last">

      <table class="six columns">
        <tr>
          <td dir="ltr" align="right">

            [RIGHT CONTENT HERE]

           </td>
           <td class="expander"></td>
         </tr>
       </table>

     </td>
     <td class="wrapper" dir="ltr" align="left">

       <table class="six columns">
         <tr>
           <td >

             [LEFT CONTENT HERE]

           </td>
         <td class="expander"></td>
       </tr>
     </table>
   </td>
 </tr>
</table> 

在桌面电子邮件客户端上，这将显示右侧的第一列和左侧的第二列。在支持响应式电子邮件的移动客户端上，第一列将显示在第二列上方。

Answer 2

由于Zurb Ink目前没有推/拉功能，我认为您最接近该功能的将是使用visibility classes。