Zurb INK 中的推拉表 [重复]答案

【问题标题】：Push Pull Tables in Zurb INK [duplicate]Zurb INK 中的推拉表 [重复]
【发布时间】：2014-09-13 17:56:49
【问题描述】：

在我正在创建的 INK HTML 时事通讯中，我将一行分为 2 个表格，每个表格有 6 列。左边的表格是文本，右边是图像。当在手机上阅读电子邮件时，我希望图像首先出现，文本出现在图像下方。在 Zurb Foundation (for Sites) 中，这可以使用推拉来完成。有没有办法在 INK 中实现相同的效果。由于 INK 使用表格，因此问题将是交换表格单元格。我尝试使用 Foundation 中的代码创建用于推送和拉取的内联 CSS，但它只是将单元格内容向右或向左移动（意料之中）

【问题讨论】：

标签： html css zurb-ink

【解决方案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>

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

【讨论】：

【解决方案2】：

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

【讨论】：