Jinja2 电子邮件模板

Question

使用 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>

这就是当前显示的内容：

并在全屏期间：

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

Answer 1

我不会考虑这种响应式，但为了使图像彼此重叠，您可以尝试将它们作为列表项并使用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>

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

Answer 2

早上好 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;
        }

Answer 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>

应该做的伎俩。

Jinja2 电子邮件模板

问题描述

3 个解决方案

解决方案1
2 已采纳 2021-06-30 19:02:47

解决方案2
1 2021-06-30 16:59:57

解决方案3
1 2021-06-30 18:56:20

Jinja2 电子邮件模板

问题描述

3 个解决方案

解决方案1 2 已采纳 2021-06-30 19:02:47

解决方案2 1 2021-06-30 16:59:57

解决方案3 1 2021-06-30 18:56:20

解决方案1
2 已采纳 2021-06-30 19:02:47

解决方案2
1 2021-06-30 16:59:57

解决方案3
1 2021-06-30 18:56:20