電子郵件的基礎 - 列和行錯位？

我很難嘗試爲我工作的公司創建電子郵件。看起來有些錯位。我不知道如何解決這個問題。任何幫助？電子郵件的基礎 - 列和行錯位？

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

下面是該問題關的圖像。

謝謝

拉爾斯

來源

2017-08-04 Lars Peterson

我沒有看到任何問題？你能粘貼問題的圖像嗎？ – 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>

來源

2017-08-04 09:42:30 RasmusGlenvig

我很欣賞你給出的答案，但是這是一種解決方法，我不幸在我們的生產代碼中不能使用它。問題應該與表結構有關，我犯了一個錯誤。 –

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

好吧，我可以強烈推薦MJML，而不是使用zurb基礎來處理郵件，因爲IMO更容易處理，我自己也在使用它。https://mjml.io/ – RasmusGlenvig

電子郵件的基礎 - 列和行錯位？

回答

相關問題