android - 不使用 Float 对齐表格

Question

小历史:我对编码还很陌生(大约一年)。我正在为我工​​作的公司设计电子邮件。它没有响应，我正在使用表格。作为新手，我对表格没有任何经验。

该设计是在 Mac 上使用 Chrome Web Dev Tools 创建的，以直观地进行调整。在 Chrome、Apple Mail(桌面)和我的 iPhone 5 中，一切看起来都很完美。但是，当我运行 Litmus 测试时，它在“特色风格”部分下标记了我设计的部分，说电子邮件客户端不'支持花车。这就是我用来对齐该部分中的四个表格的内容。

我的问题:您可以不使用 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 属性，是的，这些可以用在表格上。尽管将其设置在单元格/td 上，但该单元格内的任何表格都继承了该对齐方式。但是，如果您希望一些表格在右侧，一些表格在左侧以创建网格(看起来像您想要的那样)，那么还要在表格上添加对齐方式以使其正常工作。

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

试试我上面的建议，让我们知道进展如何。

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