不使用浮點對齊表

Question

小歷史：我相當新的編碼（大約一年）。我正在爲我工​​作的公司設計電子郵件。它不響應，我正在使用表格。作爲新人，我對桌子的體驗是不存在的。

該設計是在Mac上使用Chrome Web Dev Tools在視覺上進行調整而創建的。在Chrome瀏覽器中，通過Apple Mail（桌面）和iPhone 5，一切看起來都很完美。但是，當我運行Litmus測試時，它會在我的設計部分下面標記FEATURED FLAVORS部分，表示電子郵件客戶端不支持花車。這是我用來對齊該部分中的四個表。

我的問題：你可以對齊表而不使用float嗎？

我最關心的電子郵件客戶端是Android客戶端，因爲我們的列表中有很多客戶使用Android設備。

<table class="featured" align="center" cellpadding="0" cellspacing="0" border="0" width="100%" style="border-top: 1px solid #000000;margin-bottom: 20px;"> 
    <tr style="border-collapse: collapse;"> 
     <th width="100%" style="border-bottom: 1px solid #000000;"><h2 style="margin: 10px;"><span style="color:#039ADB;">Featured</span> Flavors</h2></th> 
    </tr> 
    <tr style="border-collapse: collapse;"> 
     <td align="left" style="text-align:left;border-collapse: collapse;"> 

      <!--[if (gte mso 9)|(IE)]> 
      <table width="600" align="center" cellpadding="0" cellspacing="0" border="0"> 
       <tr> 
        <td align="left"> 
         <![endif]--> 
         <table class="feature block" align="center" cellpadding="0" cellspacing="0" border="0" width="48%" style="float:left; margin-right: 24px; margin-bottom:20px;margin-top: 20px;border-collapse: collapse;"> 
          <tr style="border-collapse: collapse;"> 
           <td align="left" class="featurePhoto" style="text-align:left;border-collapse: collapse;" colspan="2"> 
            <a href="http://www.vavavape.com/atalaya-reserve/" alt="VaVaVape Atalaya Reserve"><img src="https://gallery.mailchimp.com/98fef26bbba3c0e7861b10caf/images/232e18dd-8c8d-4540-bfab-147a13e2acfe.jpg" width="100%" alt="VaVaVape Atalaya Reserve" /></a> 
           </td> 
          </tr> 
          <tr style="border-collapse: collapse;"> 
           <td align="left" class="featureTitle" style="text-align: left; background-color: #039ADB; line-height: 40px; padding-left: 10px; color: #ffffff; font-weight: bolder;border-collapse: collapse;width: 225px;"> 
            <a href="http://www.vavavape.com/atalaya-reserve/" style="text-decoration:none;color:#ffffff;text-transform: none;"alt="VaVaVape Atalaya Reserve">Atalaya Reserve</a> 
           </td> 
           <td align="left" class="featureIcon" style="text-align:center; background-color:#000000;border-collapse: collapse;"> 
            <a href="http://www.vavavape.com/atalaya-reserve/" alt="VaVaVape Atalaya Reserve"><img src="https://gallery.mailchimp.com/98fef26bbba3c0e7861b10caf/images/dbfec759-f5be-46e3-99de-fe470e2726ca.jpg" alt="Shopping Cart Icon" /></a> 
           </td> 
          </tr> 
         </table> 
         <!--[if (gte mso 9)|(IE)]> 
        </td> 
       </tr> 
      </table> 
      <![endif]--> 

這裏是的jsfiddle鏈接：http://jsfiddle.net/typojoe/7bgf7r7j/1/

您的幫助表示讚賞，如果你需要更多的信息，請讓我知道。

Answer 1

我建議擺脫所有花車的。大多數電子郵件客戶端不會與這些好玩。 只能使用align屬性，而且這些可以在表格上使用。 雖然將其設置在cell/td上，但該單元格內的任何表格都會繼承該對齊方式。 但是，如果您想在右側有一些表格並在左側創建一個網格（它看起來像您想要的那樣），然後將對齊添加到表格中以使其正常工作。

此外，我覺得你的代碼過於複雜的'條件表'，特別是對於非響應式設計。 現在你可以保留它，但我建議將所有外表寬度從100％更改爲600.你的設計沒有響應，所以不需要將它們延伸到視口。 你只是要求真正有問題的客戶弄亂你的設計。

試試我上面的建議，讓我們知道它是怎麼回事。

請投票表決任何有幫助的答案:)

Answer 2

試試這個 Style =「display：inline;」

Answer 3

當然！只需要嵌套更多桌子！ <td align="">是您的主要對齊工具。此外，我建議在您的<td>上使用padding-top/padding-bottom來垂直放置物體。少數客戶的保證金計算不好。

<table border="0" cellpadding="0" cellspacing="0" width="100%" style="border-collapse:collapse; padding:0; margin:0px;"> 
<tr valign="top"> 
    <td align="center" valign="top"> 
     <table border="0" cellpadding="0" cellspacing="0" width="600" style="border-collapse:collapse; padding:0; margin:0px;"> 
      <tr valign="top"> 
       <td align="left" valign="top"> 
        <!-- CONTENT! --> 
       </td> 
      </tr> 
     </table> 
    </td> 
</tr>