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

标签 php html css

我有一个 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>
        ';

最佳答案

问题是你有一个固定宽度 600px除了你的 max-width 600 像素。只需删除固定的 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>
';

希望对您有所帮助! :)

关于php - 电子邮件内容超出屏幕宽度,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/44511902/

相关文章:

php - Dompdf 将 Canvas 转换为 pdf

php - 如何修复此 mySQL 代码以显示正确的输出?

php - Laravel 5 将数据从两个表传递到 View

html - 一个 flex/网格元素设置 sibling 的大小限制

html - 如何使用伪元素让背景图片溢出div

php - 关闭 magento 购物车中的产品 url

javascript - 在 FooTable 插件上增加过滤器搜索的宽度

css - tailwind-css v3 中是否有针对第 n 个 child 的目标?

css - 输入为单选按钮标签,当输入获得焦点时选择会更改

html - Bootstrap 中的空白选项卡