不使用浮点数对齐表格

Question

小历史：我对编码还很陌生（大约一年）。我正在为我工​​作的公司设计电子邮件。它没有响应，我正在使用表格。因为我是新手，所以我没有使用桌子的经验。

该设计是在 Mac 上使用 Chrome Web 开发工具进行视觉调整的。在 Chrome、Apple Mail（桌面）和我的 iPhone 5 上，一切看起来都很完美。但是，当我运行 Litmus 测试时，它会在 FEATURED FLAVORS 部分下标记我的设计部分，说电子邮件客户端不不支持浮点数。这就是我用来对齐该部分中的四个表格的方法。

我的问题：你可以不使用浮动对齐表格吗？

我最关心的电子邮件客户端是 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 属性，是的，这些可以在表格上使用。 尽管将其设置在单元格/td 上，但该单元格内的任何表格都继承了该对齐方式。 但是，如果您想在右侧有一些表格，在左侧有一些表格来创建一个网格（看起来像您想要的那样），那么还要在表格上添加对齐以使其正常工作。

另外，我觉得您的代码使用“条件表”过于复杂，尤其是对于非响应式设计。 现在您可以保留它，但我建议将所有外部表格宽度从 100% 更改为 600。您的设计没有响应性，因此无需将它们延伸到视口。 你只是要求真正有问题的客户来搞乱你的设计。

试试我上面的建议，告诉我们进展如何。

请为任何有帮助的答案投票 :)

Answer 2

试试这个 样式="display:inline;"

Answer 3

当然！只需嵌套更多表！ <td align=""> 是您的主要对齐工具。另外，我建议在您的<td>s 上使用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>