无法将 HTML 页脚拉伸到全宽答案

【问题标题】：Unable to stretch HTML footer to the full width无法将 HTML 页脚拉伸到全宽
【发布时间】：2022-02-08 21:15:24
【问题描述】：

我使用表格制作了一个 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;
      }

提前谢谢你

【问题讨论】：

标签： html css html-table flexbox

【解决方案1】：

对电子邮件模板使用内联 CSS 更安全，我也不认为任何电子邮件客户端支持 align-content 属性，甚至不支持 width 上的 max-content。也许可以这样尝试：

<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 内联，并在内部 td 中添加了一个 div 以与中心对齐。

【讨论】：

【解决方案2】：

将width: max-content; 更改为width: 100%;，它应该可以工作。您可以阅读有关“最大内容”如何工作的更多信息here

【讨论】：

【解决方案3】：

对表格使用width: 100%。

【讨论】：