【问题标题】: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%

        【讨论】:

          猜你喜欢
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 1970-01-01
          • 2020-01-04
          相关资源
          最近更新 更多