Question

我正在使用Zurb Ink制作HTML电子邮件。使用面板，它在浏览器中看起来是正确的，宽度为601px。但是根据Safari OS（Mac book）的展望，面板会一直到电子邮件（如页脚或标题）。

Safari中的外观是否应该如此？或者我的代码有问题吗？

           <table class="row">
                <tr>
                    <td class="panel" style="background: #ECF8FF; border-color: #b9e5ff">

                        <table class="twelve columns container">
                            {% for item in object_list %}
                            <tr>
                                 <td class="four sub-columns">
                                     {% if not item.user_assigned %}
                                     <table class="tiny-button small radius alert">
                                         <tr>
                                             <td>unssigned</td>
                                     {% else %}
                                     <table class="tiny-button small radius success">
                                         <tr>
                                             <td>assigned</td>
                                    {% endif %}
                                         </tr>
                                     </table>
                                 </td>
                                 <td class="eight sub-columns last">
                                     {{ item.date_due }} - {{ item.action }}
                                 </td>
                                 <td class="expander"></td>
                             </tr>
                             {% endfor %}
                         </table>
                     </td>
                 </tr>
             </table>
         </td>
     </tr>
 </table>

Answer 1

看起来是因为你缺少包装和容器。

在docs中，它提到了以下内容：

容器 - 将内容限制在大屏幕上的580px包装器（95％在小屏幕上）并将其集中在体内。

包装器 - 包装每个.columns表，以便在列之间创建一个装订线，并强制它们在小屏幕上展开到全宽。

Zurb Ink Panel跨页面拉伸

1 个答案: