时间戳

首页 > 解决方案 > 无法将 HTML 页脚拉伸到全宽

html - 无法将 HTML 页脚拉伸到全宽

问题描述

我使用表格制作了一个 HTML 电子邮件布局，该设计在我的机器上运行良好，但是当我将代码放入putsmail中进行测试时，当我在桌面查看邮件时，页脚向左移动。它应该是这样的： 在此处输入图像描述

它是这样来的： 在此处输入图像描述

我的 HTML 代码：

<!--Footer-->
                  <table class="footer">
                    <tr>
                      <td style="padding: 50px;background-color: #f7f7f7">
                        <table width="100%">
                          <p style="text-align: center; font-size: 12px; line-height: 1.5;">
                            Having Trouble with something?
                            <br>
                            Reach out to us <a href="#">support@vantagecircle.com</a>
                            </p>
                            <img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
                        </table>
                      </td>
                    </tr>
                  </table>

我的 CSS 代码：

.footer{
        align-content: center;
        width: max-content;
        position: relative;
      }

先感谢您

标签： htmlcsshtml-tableflexbox

解决方案

将内联 CSS 用于电子邮件模板更安全，我也不认为任何电子邮件客户端支持该align-content属性，甚至不max-content支持width. 也许试试这样：

<table width="100%">
  <tr width="100%">
    <td style="padding: 50px;background-color:#f7f7f7">
      <div style="margin-left:auto;margin-right:auto;">
        <p style="text-align: center; font-size: 12px; line-height: 1.5;">
          Having Trouble with something?
          <br>
          Reach out to us <a href="#">support@vantagecircle.com</a>
        </p>
        <img style="display: block; margin-right: auto;margin-left: auto; padding-bottom: 25px;" src="https://i.ibb.co/1Z05xTH/vc-footer-logo.png" width="120px" />
      </div>
    </td>
  </tr>
</table>

请注意，我在width那里使用内联，并div在内部添加了一个td以与中心对齐。

推荐阅读