Jinja2 电子邮件模板答案

【问题标题】：Jinja2 Email TemplateJinja2 电子邮件模板
【发布时间】：2021-09-12 20:19:32
【问题描述】：

使用 Jijna2，我正在尝试制作一个几乎很简单的响应式 HTML 电子邮件模板

<!DOCTYPE html>
<html>
    <body>
    <p><strong>Hello</strong>,</p>
    <p>Below are the deals running on <a href="https://www.{{ url }}.com">{{ url }}</a> at <strong>{{ date }}</strong>:</p>
    <p>&nbsp;</p>
    
    <ul>
        {% for image in images %}
          <a href="{{ image }}">
            <img src="{{ image }}" width=500" height="200">
          </a>
        {% endfor %}
    </ul>
    <p><strong>Regards,</strong></p>
    <p>Team</p>
    </body>
</html>

这就是当前显示的内容：

全屏时：

在这种情况下如何使其响应并保持图像一张一张的显示。在全屏或移动屏幕期间不并排！

【问题讨论】：

周边图片列表项为<li style="width:100%">?

标签： python html django flask jinja2

【解决方案1】：

早上好 Ahmed，您可以插入响应行为所需的 css 代码，如示例中所示：

<style type="text/css">
    body {
        margin: 0;
        padding: 0;
    }

    table,
    td,
    tr {
        vertical-align: top;
        border-collapse: collapse;
    }

    * {
        line-height: inherit;
    }

    a[x-apple-data-detectors=true] {
        color: inherit !important;
        text-decoration: none !important;
    }
</style>
<style id="media-query" type="text/css">
    @media (max-width: 520px) {

        .block-grid,
        .col {
            min-width: 320px !important;
            max-width: 100% !important;
            display: block !important;
        }

【讨论】：

类似stackoverflow.com/a/25036606/7658985 ?

【解决方案2】：

我不会认为这是响应式的，但为了让图像彼此重叠，您可以尝试将它们作为列表项并使用 list-style: none 隐藏列表项目符号，例如：

<!DOCTYPE html>
<html>
    <body>
    <p><strong>Hello</strong>,</p>
    <p>Below are the deals running on <a href="https://www.{{ url }}.com">{{ url }}</a> at <strong>{{ date }}</strong>:</p>
    <p>&nbsp;</p>
    
    <ul style="list-style: none">
      <li>
          <a href="#">
            <img src="https://via.placeholder.com/500x200" width=500" height="200">
          </a>
    <li/>
    <li>
          <a href="#">
            <img src="https://via.placeholder.com/500x200" width=500" height="200">
          </a>
    <li/>
    </ul>
    <p><strong>Regards,</strong></p>
    <p>Team</p>
    </body>
</html>

或者正如我在 cmets 中告诉你的那样，使锚链接具有全宽，例如：<a href="{{ image }}" style="width:100%">

【讨论】：

【解决方案3】：

您可以简单地在图像容器li 上使用一个类，然后使用 css 使该类具有 100% 的宽度

所以在你的情况下：

<style>
.full-width{
    width: 100%;
}
</style>
<!DOCTYPE html>
<html>
    <body>
    <p><strong>Hello</strong>,</p>
    <p>Below are the deals running on <a href="https://www.{{ url }}.com">{{ url }}</a> at <strong>{{ date }}</strong>:</p>
    <p>&nbsp;</p>
    
    <ul>
        {% for image in images %}
          <li class="full-width">
          <a href="{{ image }}">
            <img src="{{ image }}" height="200">
          </a>
          </li>
        {% endfor %}
    </ul>
    <p><strong>Regards,</strong></p>
    <p>Team</p>
    </body>
</html>

应该做的伎俩。

【讨论】：