【问题标题】: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

      【讨论】:

        猜你喜欢
        • 1970-01-01
        • 1970-01-01
        • 2014-04-01
        • 1970-01-01
        • 1970-01-01
        • 1970-01-01
        • 2014-07-15
        • 1970-01-01
        • 2013-11-20
        相关资源
        最近更新 更多