Question

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

使用Chrome Web开发工具在Mac上创建设计，以便直观地进行调整。通过Apple Mail（台式机）和我的iPhone 5，Chrome中的一切看起来都很完美。但是，当我运行Litmus测试时，它在FEATURED FLAVORS部分标记了我的设计部分，说电子邮件客户端不在＃39; t支持Floats。这是我用来对齐该部分中的四个表的原因。

我的问题：您可以在不使用浮动的情况下对齐表吗？

我最关心的电子邮件客户端是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

试试这个风格= “显示：内联;”

Answer 3

当然！只是嵌套更多的桌子！ <td align="">是您的主要对齐工具。另外，我建议您在padding-top上使用padding-bottom / <td>来垂直放置内容。少数客户的保证金计算不佳。

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

在不使用Float的情况下对齐表格

3 个答案: