不使用 Float 对齐表格

Question

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

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

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

我最关心的电子邮件客户端是 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 上的 link：http://jsfiddle.net/typojoe/7bgf7r7j/1/

感谢您的帮助，如果您需要更多信息，请告诉我。

Answer 1

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

Answer 2

好的！只是嵌套更多的桌子！ <td align=""> 是您的主要对齐工具。此外，我建议在你的 <td> 上使用 padding-top / padding-bottom 到 space 垂直方向。部分客户的保证金计算不当。

<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>

Answer 3

我会建议摆脱你所有的花车。大多数电子邮件客户端不会很好地使用这些。仅使用 align 属性，是的，这些可以在 tables 上使用。尽管将其设置在 cell/td 上，但该单元格内的任何 table 都继承了该对齐方式。但是，如果你想在右边有一些 tables，在左边有一些来创建一个网格（它看起来像你想要的），然后在 tables 上也添加对齐以获得这个工作。

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

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

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

不使用 Float 对齐表格

Align tables without using Float

html

css

email

android

html-email