Question

我正在创建一个电子邮件模板。我想要的只是三个盒子的常规浮动： enter image description here

简化的HTML：

        <center>
            <div style="width: 100%; max-width: 480px; border-collapse: collapse; margin:0; padding:0; border-spacing: 0;" cellpadding="0" cellspacing="0">

                <div class="main" align="left" width="300" style="display: block; float: left; width: 300px; background: red; border-collapse: collapse; margin:0; padding:0; border-spacing: 0;" cellpadding="0" cellspacing="0">

                </div>

                <div class="half" align="left" width="180" style="display: block; float: left; width: 180px; height: 100px; background: green; border-collapse: collapse; margin:0; padding:0; border-spacing: 0;" cellpadding="0" cellspacing="0">

                </div>


                <div class="half" align="left" width="180" style="display: block; float: left; width: 180px; height: 100px; background: blue; border-collapse: collapse; margin:0; padding:0; border-spacing: 0;" cellpadding="0" cellspacing="0">

                </div>

            </div>
        </center>

CSS：

@media screen and (max-width: 480px) {
    .main {
        width:100% !important;
    }

    .half {
        width:45% !important;
    }

    .third {
        width:33% !important;
    }

    .third:last-child {
        width:34% !important;
    }
}

这在iOS和Android客户端上运行良好。我只是无法弄清楚如何使这个浮动和宽度在outlook中工作（它确实需要在那里响应，但我应该正确显示桌面视图）。

Answer 1

使用表格，诀窍是在display:block;元素上打开/关闭<td>。

这应该让你开始：

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head><meta http-equiv="Content-Type" content="text/html; charset=utf-8"><title></title>
  <style type="text/css">
    #outlook a {padding:0;}
    body{width:100% !important; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%; margin:0; padding:0;} /* force default font sizes */
    .ExternalClass {width:100%;} .ExternalClass, .ExternalClass p, .ExternalClass span, .ExternalClass font, .ExternalClass td, .ExternalClass div {line-height: 100%;} /* Hotmail */
    a:active, a:visited, a[href^="tel"], a[href^="sms"] { text-decoration: none; color: #000001 !important; pointer-events: auto; cursor: default;}
    table td {border-collapse: collapse;}

    @media screen and (max-width: 600px) {
        td[class="two-third"], td[class="third-container"] {
            width:100%;
            display:block;
        }

        td[class="third"] {
            width:50% !important;
            display:inline-block !important;
        }
    }

  </style>
</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF"><table bgcolor="#252525" width="100%" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td><table width="600" border="0" align="center" cellpadding="0" cellspacing="0"><tr><td valign="top" style="padding-top:30px; padding-bottom:30px;">

<table width="100%" border="0" cellpadding="0" cellspacing="0">
  <tr>
    <td align="left" valign="top" class="two-third" width="66.66%" height="60px" bgcolor="#FF0000">&nbsp;
    </td>
    <td align="left" valign="top" class="third-container" width="33.33%" height="60px">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td class="third" width="100%" height="30px" bgcolor="#008800" style="display:block;">&nbsp;
          </td>
          <td class="third" width="100%" height="30px" bgcolor="#0000FF" style="display:block;">&nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</td></tr></table></td></tr></table></body></html>

Answer 2

查看email standards project，您会看到Outlook中不支持float。在创建HTML电子邮件时，最好的计划是使用嵌套表，尽管你的每一个直觉都告诉你这个想法有多糟糕。

跨客户端浮动电子邮件模板

2 个答案: