0

我正在尝试创建一个移动响应电子邮件，但它似乎float:left不起作用。我需要一双新鲜的眼睛来看看它：

http://scratchpad.io/silent-science-7546

       <table id="Flagmark_Headline" class="full_TD_width" height="85" width="551" border="0" cellspacing="0" cellpadding="0">
          <tbody>
            <tr>
              <td width="21" height="85" class="mhide"></td>
              <td align="left" valign="top" style="" class="headline" width="365">
                <table border="0" width="365" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td height="20"></td>
                    </tr>
                    <tr>
                      <td height="30" class="main_headline" style="font-size: 150%;">
                        <h1 style="padding:0; margin:0;"><font face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none; font-weight:normal;" size="5">This, is a great headline</font></h1>
                      </td>
                    </tr>
                    <tr>
                      <td height="20"><font face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none; font-weight:normal;" size="4">No if, ands, or maybes!</font></td>
                    </tr>
                    <tr>
                      <td height="15"></td>
                    </tr>
                  </tbody>
                </table>
              </td>
              <td class="mhide" width="45"></td>
              <td width="113" class="get-one-hundred">
                <table border="0" bordercolor="" width="113" cellpadding="0" cellspacing="0">
                  <tbody>
                    <tr>
                      <td width="123" height="5"></td>
                    </tr>
                    <tr>
                      <td class="get-money" width="123" height="55"><font face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none; font-weight:normal;" size="6">?????</font></td>
                    </tr>
                    <tr>
                      <td height="13"><font face="Arial, Helvetica, sans-serif" style="-webkit-text-size-adjust:none; font-weight:normal;" size="2">Profit</font></font></td>
                    </tr>
                    <tr>
                      <td width="551" height="5"></td>
                    </tr>
                    <tr></tr>
                  </tbody>
                </table>
              </td>
              <td width="6"></td>
            </tr>
          </tbody>
        </table>

我的 CSS：

   td[class=headline], td[class=main_headline], td[class=headline] table, td[class=get-one-hundred], td[class=get-money], td[class=get-one-hundred] table, td[class=divider]{width:300px !important; clear: left !important; float: left !important; overflow: hidden !important; display: block !important;}  

   table[id=Flagmark_Headline] { width: 298px !important; }

   table[id=Flagmark_Headline] { padding-bottom: 5px !important; }

我尝试了浮动：清除，溢出：隐藏等，但我仍然卡住了！谁能帮我吗？

4

1 回答 1

0

电子邮件客户端对浮点数的支持很差。在编码电子邮件时，我什至不费心使用它。在编写响应式电子邮件时会遇到的一个主要问题是，一半的 Outlook 版本不支持最大宽度。为了解决这个问题，我建议将您的电子邮件编码为静态大小，例如 600 像素宽，然后在头部添加一两个媒体查询来调整元素的大小。由于您专门针对 iOS 和 Android，它们都支持文档级别的媒体查询，所以您应该很高兴。您将在您的目标客户中收到一封响应式电子邮件，然后优雅地降级为其他所有人的静态但仍然好看的电子邮件。

于 2013-07-17T02:34:58.973 回答