【发布时间】：2023-03-31 10:08:01
【问题描述】：
我的 html 将通过电子邮件服务作为电子邮件发送。因此它将在 gmail、yahoo 邮件、outlook 等中读取/显示。 这就是为什么我不能使用 inline-flex。 （我尝试使用 max-width 制作类，但它们被忽略了）。 这是我的文件中的内容，我在需要的地方包括了：
<table width="100%" cellpadding="0" cellspacing="0" border="0" class="container" bgcolor="#ffffff" align="center">
<tr>
<td align="left" style="width: 180px;min-width: 50%;max-width: 100%">
<div align="center" style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; color: #ffffff;line-height:15px;background-color: #24b646;width: 180px;padding: 0px 10px 0px 10px;margin: 30px 0 30px 60px; height: 45px;" class="mobileWidth100 mobilePadding0">
<a width="auto" href="{{extra.manage_team}}" target="_blank" alias="" style="font-family: 'Lato', sans-serif; text-decoration: none; color: #ffffff;font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;">{% trans 'Manage Team'%}</a>
</div>
</td>
<td align="left" style="width: 180px;min-width: 50%;max-width: 100%">
<div align="center" style="font-family: 'Lato', sans-serif; font-size: 14px; border-radius: 6px; color: #ffffff; border: 1px solid #24b646; line-height:15px;background-color: #ffffff;width: 180px;padding: 0px 10px 0px 10px;height: 45px;">
<a width="auto" href="{{extra.billing_overview}}" target="_blank" alias="" style="font-family: 'Lato', sans-serif; text-decoration: none; color: #24b646; font-weight:bold; letter-spacing:1px;height: 45px;line-height: 15px;vertical-align: middle;display:table-cell;">{% trans 'Billing Overview'%}</a>
</div>
</td>
</tr>
</table>
这是它在桌面上的外观，部分还可以（我需要将第一个按钮更靠左）：
这就是它在移动设备上的外观，如您所见，明显损坏：
我只想让 1 个对象彼此靠近，然后在移动设备上，第二个向下，并且两者的宽度都与它们的父对象相同
【问题讨论】：
-
您可以使用 html 框架（如 Bootstrap）类或在您的 css 文件中使用媒体查询来执行此操作。 @media (max-width:768px){...}
-
就像我说的，这是用于 django 模板的，这意味着这个 html 是作为电子邮件发送的。电子邮件客户端删除类。我尝试使用类，但它们只是被忽略并且没有任何反应。也许我的标题不清楚，所以我也编辑了我的回复
-
我不认为你可以用电子邮件做到这一点，因为你需要使用媒体查询，并且它们在电子邮件客户端中没有得到广泛支持（尽管我找不到支持的最新客户端列表他们）
-
这与 django 模板无关 - 你会得到完全相同的结果，但是生成的 HTML（包括纯静态 HTML）。
-
@ArthurM - 这是用于 HTML 电子邮件，而不是网站。这不能使用引导程序。
标签： css html-table html-email display