0

我正在尝试布置一个响应式电子邮件模板以在所有主要客户中工作，我就在那里，但由于 Outlook 不支持max-width，并且我将所有元素设置为width: 100%，它将我的内容一直放在左边，因为它是左对齐的。align:center我可以使用或使页眉和页脚居中margin: 0 auto。

我能做些什么来防止我的内容一直向左移动而不给任何固定宽度或使用最大宽度（我正在使用，但 Outlook 只是忽略）？

4

2 回答 2

0

听起来您更多地指的是“流动”布局（基于百分比）而不是“响应式”布局（您将使用媒体查询根据显示设备的宽度指定样式）。

既然为 设置一个pixel值margin-left没有多大意义，为什么不设置margin-left一个percentage值呢？

margin-left: 4%;

否则，您可能需要查看 MailChimp 上有关媒体查询的以下资源。

http://templates.mailchimp.com/development/media-queries/

于 2013-08-09T15:20:41.167 回答
0

试试这个，如果需要的话，使用媒体查询来调整不同屏幕尺寸的宽度百分比。请记住，您的媒体查询不会在这些电子邮件客户端中生效。

</head>
<body style="margin: 0px; padding: 0px; background-color: #FFFFFF;" bgcolor="#FFFFFF">

<table width="100%" border="0" align="center" cellpadding="0" cellspacing="0" bgcolor="#252525">
  <tr>
    <td align="center" style="padding-top:30px; padding-bottom:30px;">
      <table width="100%" border="0" cellpadding="0" cellspacing="0">
        <tr>
          <td width="10%">&nbsp;
          </td>
          <td align="left" width="80%" bgcolor="#FFFFFF">
            &nbsp;<br>content<br>...<br>&nbsp;
          </td>
          <td width="10%">&nbsp;
          </td>
        </tr>
      </table>
    </td>
  </tr>
</table>

</body></html>
于 2013-08-09T16:07:28.880 回答