Question

我正在尝试创建移动响应式电子邮件，但似乎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; }

我试过浮动：清除，溢出：隐藏等但我仍然卡住了！任何人都可以帮助我吗？

Answer 1

电子邮件客户端支持Float。在编写电子邮件时我甚至不打扰使用它。编写响应式电子邮件时遇到的一个主要问题是，在一半版本的Outlook中缺少对最大宽度的支持。为了解决这个问题，我建议您将电子邮件编码为静态大小，例如600px宽，然后在头部添加一个或两个媒体查询来调整元素的大小。由于您专门针对iOS和Android，这两者都支持文档级媒体查询，因此您应该不错。您将在您定位的客户端中收到自适应电子邮件，然后优雅地降级为其他人的静态但仍然很好看的电子邮件。

为什么不漂浮：离开工作？

1 个答案: