Question

我有一封php Mailer电子邮件，其中我正在设置html电子邮件的样式。除#email-header内的内容超出屏幕宽度外，一切正常。我不确定为什么，因为我将max-width设置为600px。

有人看到我做错了会导致这种情况吗？

$mail2->Body    = '
            <body>
                <div id="header-background" style="background:#16597B;width:100%;max-width:100%;height:auto;">
                    <div id="email-header" style="width:600px;max-width:600px;height:auto;margin:auto;display:block;padding:20px 8px;">
                        <div id="logo"><a href=""><img src="" style="width:200px;height:auto;text-align:center" alt=""></a></div>
                        <div style="clear:both;"></div>
                        <div id="email-to" style="color:#FFF;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:bold;font-size: 2em;margin-top:35px;">Hi '.$consult_name.',</div>
                            <div id="email-header-description" style="font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1.3em;color:#d0dde4;margin-top:45px;">
                                <p style="font-size:1.3em;">Thanks for wanting to work with us!</p>
                                <p>We received your consultation inquiry. Here shortly your information will be reviewed and we will be in touch with you as soon as possible to schedule your consultation.</p><br>
                                <p>Thanks again!</p><br>
                            </div>
                        </div>
                    </div>
                </div>
            </body>
        ';

Answer 1

问题是，除{600}的600px之外，您还有max-width的固定宽度。只需删除固定的width即可修复自动换行问题。

请注意，600px是手机的一个相当高的断点，因为许多手机都有display below this。我建议300px覆盖大多数设备。

另请注意，您还有一个额外的结束</div>，这可能会导致某些客户稍微放松一下。

以下是修复这两个问题的更新代码：

$mail2->Body = '
<body>
  <div id="header-background" style="background:#16597B;width:100%;max-width:100%;height:auto;">
    <div id="email-header" style="max-width:600px;height:auto;margin:auto;display:block;padding:20px 8px;">
      <div id="logo">
        <a href=""><img src="http://placehold.it/100" style="width:200px;height:auto;text-align:center" alt=""></a>
      </div>
      <div style="clear:both;"></div>
      <div id="email-to" style="color:#FFF;font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-weight:bold;font-size: 2em;margin-top:35px;">Hi '.$consult_name.',</div>
      <div id="email-header-description" style="font-family:Helvetica Neue,Helvetica,Arial,sans-serif;font-size:1.3em;color:#d0dde4;margin-top:45px;">
        <p style="font-size:1.3em;">Thanks for wanting to work with us!</p>
        <p>We received your consultation inquiry. Here shortly your information will be reviewed and we will be in touch with you as soon as possible to schedule your consultation.</p>
        <br>
        <p>Thanks again!</p>
        <br>
      </div>
    </div>
  </div>
</body>
';

希望这有帮助！：）

电子邮件内容超出屏幕宽度

1 个答案: