html - 如何在 outlook 中将左右列平均对齐？

Question

我正在设计电子邮件通讯模板。

我在左右两侧创建了两个按钮，但水平方向不适合。

这是我的代码。

输出在 gmail 中正确显示，但不支持输出。

 <tr>
   <td width="540" valign="top">

        <table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
            <tbody>
              <tr>
               <td align="center" valign="top" style=" ">
                <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">   
                <tbody>
                  <tr>
                           <td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
   <a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"> 
       <font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
                         </td>
                       </tr>
                   </tbody>
                </table>
             </td> 
         </tr>
      </tbody>
   </table>  

    <table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
       <tbody>
          <tr>
           <td align="center" valign="top" style=" ">
             <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">   
               <tbody>
               <tr>
                     <td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;   font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;"><a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"><font color="white"><span style="display:block;"><b>GET A QUICK QUOTE</b></span></font></span></font></a>
                      </td>
                    </tr>
                 </tbody>
                </table>
               </td> 
           </tr>
       </tbody>
    </table>    

  </td>
</tr>

我想两边对齐，需要支持outlook邮件

Answer 1

将您的代码包装在一个table 中，并将包含按钮的两个table 放在两个单独的td 中。

这是代码示例和 fiddle

<table> 
<tr>
   <td width="540" valign="top">
        <table class="full" valign="left" width="255" cellspacing="0" cellpadding="0" border="0" style="border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
            <tbody>
              <tr>
               <td align="center" valign="top" style=" ">
                    <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style="margin: 0;">   
                        <tbody>
                          <tr>
                           <td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
   <a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank"><font size="1" face="Arial"><span style="font-size:12px;"> 
       <font color="white"><span style="display:block;"><b>START YOUR FREE TRAIL</b></span></font></span></font></a>
                         </td>
                       </tr>
                   </tbody>
                </table>
             </td> 
         </tr>
      </tbody>
   </table>  
    </td>
       <td>
    <table class="full" valign="right" align="right" width="255" cellspacing="0" cellpadding="0" border="0" style=" display:inline-block;border-collapse:collapse; mso-table-lspace:0pt; mso-table-rspace:0pt;">
       <tbody>
          <tr>
           <td align="center" valign="top" style=" ">
             <table align="center" cellspacing="0" cellpadding="0" border="0" bgcolor="#f46f20" background-color="#f46f20" style=" ">   
               <tbody>
               <tr>
<td align="center" valign="middle" background-color="#f46f20" bgcolor="#f46f20" background-color="#f46f20" style="padding: 5px 20px;   font-size:14px; line-height: 24px; font-family:Cambria,serif; mso-line-height-rule: exactly;text-decoration:none;">
    <a style="font-weight: bold; color:#ffffff;text-decoration:none; " href="http://www.indiainternetready.com/get-a-quote/" target="_blank">
        <font size="1" face="Arial">
            <span style="font-size:12px;">
                <font color="white">
                    <span style="display:block;">
                        <b>GET A QUICK QUOTE</b>
                    </span></font></span></font></a>
                      </td>
                    </tr>
                 </tbody>
                </table>
               </td> 
           </tr>
       </tbody>
    </table>    

  </td>
</tr>
</table>