2017-09-18 9 views
1

私は電子メールテンプレートを作成していて、forloopでpythonリストを挿入していますが、問題は私が既にテンプレートを設計して以来、私は完全に左の配列と右の配列がプッシュダウンされます。html電子メールテンプレートが配列を押し下げる

Showing the error image 右側の配列がプッシュダウンされます。

私はテンプレートのデザインを変更すると、電子メールを有効にするので、配列を修正する必要があります。

<tr> 
      <td bgcolor="#FFFFFF" align="center" valign="top" style= 
      "padding: 10px;"> 
      <table role="presentation" cellspacing="0" cellpadding= 
      "0" border="0" width="100%"> 
       <tr> 
       <!-- Column : BEGIN --> 
       <td width="50%" class="stack-column-center" align= 
       "center"> 
        <table role="presentation section" class= 
        "presentation-section" cellspacing="0" 
        cellpadding="0" border="0"> 
        <tr> 
         <th style="text-align: center"> 
         <h3 style= 
         " font-size:14px; font-weight:800; margin:0 0 10px; font-family:Helvetica;"> 
         Tele companies 
         </h3> 
         </th> 
        </tr> 
         {% for comp, values in vis_domain.companies %} 
        <tr> 
         <td style="text-align: center"> 
         <p style= 
         "margin:5px 0; font-size:14px; font-family:Helvetica;"> 
         <span style="font-size:13px ;color:gray; ">{{ values.0 }}</span> {{ comp }} 
         </p> 
         </td> 
        </tr> 
         {% endfor %} 

        </table> 
       </td><!-- Column : END --> 
       <!-- Column : BEGIN --> 
       <td width="50%" class="stack-column-center" align= 
       "center"> 
        <table role="presentation" class= 
        "presentation-section" cellspacing="0" 
        cellpadding="0" border="0"> 
        <tr> 
         <th style="text-align: center"> 
         <h3 style= 
         " font-size:14px; font-weight:800; margin:0 0 10px; font-family:Helvetica;"> 
         Tags used in chats 
         </h3> 
         </th> 
        </tr> 
         {% for tags in vis_domain.tags %} 
        <tr> 
         <td style="text-align: center"> 
         <p style="margin:5px 0; font-size:14px;font-family:Helvetica;"> 
         <span style="font-size:13px ;color:gray;">{{ tags.tag_count }}</span> {{ tags.name }} 
         </p> 
         </td> 
        </tr> 
         {% endfor %} 

        </table> 
       </td><!-- Column : END --> 
       </tr> 
      </table> 
      </td> 
     </tr><!-- 2 Even Columns : END --> 

答えて

0

あなたは、TDのにスタイルを追加し、垂直方向の配置を指定する必要があります。 このような2つの<!-- Column : BEGIN -->コメントの後の最初のtdを編集してみてください。

<td width="50%" class="stack-column-center" align="center" style="vertical-align: top;"> 
+0

それが働いたうれしいです!参考までに、プロパティが主要な電子メールクライアントによってサポートされていたかどうかを知るために、ここで[vertical-align](https://www.campaignmonitor.com/css/text-fonts/vertical-align/)をチェックしました:) – Signo

関連する問題