电子邮件的基础 - 列和行错位？

问题描述：

我很难尝试为我工作的公司创建电子邮件。看起来有些错位。我不知道如何解决这个问题。任何帮助？电子邮件的基础 - 列和行错位？

HTML（八分的可读性）

<body> 
    <table align="center" class="container"> 
    <tbody> 
     <tr> 
     <td> 
      <table class="row"> 
      <tbody> 
       <tr> 
       <th class="large-6 small-12 columns">   <-- OVERFLOWS 
        <table> 
         <tr> 
         <th> 
          <h5 class="text-center lead">Lieferadresse</h5> 
          <p class="text-center sub">Fredrick Müller</p> 
          <p class="text-center sub">Apfelstraße 12</p> 
          <p class="text-center sub">95468 Weiden</p> 
          <p class="text-center sub">Germany</p> 
         </th> 
         </tr> 
        </table> 
        </th> 
       </tr> 
       </tbody> 
      </table> 
      </td> 
     </tr> 
     </tbody> 
    </table> 
    </body>

问题描述

当屏幕缩小到small断点，似乎large断点风格不会被删除。我相信这是造成这个问题，但不知道如何解决这个问题。

我在代码中指出的th标记会溢出表格，导致整个文档无法响应。

在我的实际代码中，这里没有显示，我有两个分别为first和last的th标签。这些类似乎使情况变得更糟，但在large断点上一切都对齐了。

这情况下，任何人想复制的问题，这里是CDN：

<!-- Foundation for Emails --> 
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.css" />

下面是谷歌DevTools问题。正如你所看到的，大型的风格仍然影响着这个元素。造成异常padding和错位。

EDIT

下面是该问题关的图像。

谢谢

拉尔斯

我没有看到任何问题？你能粘贴问题的图像吗？ – RasmusGlenvig

@RasmusGlenvig请检查我编辑的答案。 –

正如我所看到的那样，它是第一个填充左边的类：16px – RasmusGlenvig

答

你可以做的是，给<th class="large-6 small-12 columns" style="padding-left: 8px;">，然后他们都将在中心。

代码片段：

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation-emails/2.2.1/foundation-emails.css" /> 
 
    
 
<body> 
 
    <table align="center" class="container"> 
 
    <tbody> 
 
     <tr> 
 
     <td> 
 
      <table class="row"> 
 
      <tbody> 
 
       <tr> 
 
       <th class="large-6 small-12 columns first" style="padding-left: 8px;">   
 
        <table> 
 
         <tr> 
 
         <th> 
 
          <h5 class="text-center lead">Rechnungsadresse</h5> 
 
          <p class="text-center sub">Fredrick Müller</p> 
 
          <p class="text-center sub">Apfelstraße 12</p> 
 
          <p class="text-center sub">95468 Weiden</p> 
 
          <p class="text-center sub">Germany</p> 
 
         </th> 
 
         </tr> 
 
        </table> 
 
        </th> 
 
        <th class="large-6 small-12 columns last">   
 
        <table> 
 
         <tr> 
 
         <th> 
 
          <h5 class="text-center lead">Lieferadresse</h5> 
 
          <p class="text-center sub">Fredrick Müller</p> 
 
          <p class="text-center sub">Apfelstraße 12</p> 
 
          <p class="text-center sub">95468 Weiden</p> 
 
          <p class="text-center sub">Germany</p> 
 
         </th> 
 
         </tr> 
 
        </table> 
 
        </th> 
 
       </tr> 
 
       </tbody> 
 
      </table> 
 
      </td> 
 
     </tr> 
 
     </tbody> 
 
    </table> 
 
    </body>

我很欣赏你给出的答案，但是这是一种解决方法，我不幸在我们的生产代码中不能使用它。问题应该与表结构有关，我犯了一个错误。 –

即使使用'padding'修补程序，它似乎仍然溢出。:( –

好吧，我可以强烈推荐MJML，而不是使用zurb基础来处理邮件，因为IMO更容易处理，我自己也在使用它。https://mjml.io/ – RasmusGlenvig

电子邮件的基础 - 列和行错位？

相关推荐