【发布时间】：2022-01-07 15:23:57
【问题描述】：
这是关于一个电子邮件模板，每个表格包含一个项目，右侧是图片，左侧是名称/品牌名称/尺寸等详细信息。 我尝试了一堆我在网上找到的不同解决方案，但我无法让结构对所有平台都具有足够的响应能力。 有关结构的任何资源都是有帮助的。我做了一张图片来描述结构的样子。
另一位用户指出，我可以展示我尝试过的最后一个模板以及我使用的一个效果不佳的资源。 https://codepen.io/Georgeslatina/pen/gOGzavj
<table role="presentation" cellpadding="0" cellspacing="0" width="580" style="margin: auto;height: 220px; table-layout: fixed; border: solid 1px #efefef; background-color: #fdfdfd; padding: 20px;margin-bottom:28px !important;direction:ltr !important">
<tbody>
<tr>
<td colspan="60%">
<table role="presentation" cellpadding="0" cellspacing="0" style="text-align: right; table-layout: fixed; width: 100%; height: 180px;">
<tbody>
<tr style="width: 100%;height:20%;">
<td colspan="60%" style="">
<div style="word-wrap: break-word;padding-right:12px;font-size:18px"> text2</div>
</td>
<td colspan="5%" style="">
<div style="height: 20px; width: 1px; background-color: black; margin: auto;">
</div>
</td>
<td colspan="35%" style="">
<div style="font-size:20px;word-wrap: break-word;padding-right:22%"> text1</div>
</td>
</tr>
<tr>
<td colspan="44%" style="">
<div style="padding-right:10px">
<span> ₪100 </span>
<span style="padding-left:8px"> מחיר</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="24%" style="">
<div style="padding-right:20%">
<span style="padding-left:8px">L </span>
<span>מידה</span>
</div>
</td>
<td colspan="2%" style="">
<div style="height: 20px; width: 1px; background-color: #e6e6e6; margin: auto;">
</div>
</td>
<td colspan="13%" style="padding-right:8px">
<div style="border-radius:50%; width: 11px; height: 11px; border: 2px solid black; margin-left:65%">
<div style="width: 9px; height: 9px;border-radius:50%; margin:auto; margin-top:1px"></div>
</div>
</td>
<td colspan="11%">
<div style="float:left">צבע</div>
</td>
</tr>
<tr>
<td colspan="100%" style="padding-right:30px;height:30px">
<div style="text-align:right">
<span>
reason
</span>
<span style="text-align:right;font-family:NarkisBlockMF;font-size:18px;font-weight: 550;font-stretch: normal;font-style: normal;line-height: 1.28;letter-spacing: normal;color: #000;"> :סיבת החזרה</span>
</div>
</td>
</tr>
</tbody>
</table>
</td>
<td colspan="25%" style="position: relative">
<div style="display:block;width:135px; height:180px;text-align: center; font-size: 0; background:url('https://i.natgeofe.com/n/46b07b5e-1264-42e1-ae4b-8a021226e2d0/domestic-cat_thumb_square.jpg') no-repeat center; background-size: cover">
</div>
<div style="
position:absolute;
z-index: 1;
bottom:0;
width: 135px;
height: 24px;
opacity: 0.8;
font-family:NarkisBlockMF;
font-size:17px;
background-color: #000;
color: white;
text-align: center;
line-height: 24px;">
פריט החזרה
</div>
</td>
</tr>
</tbody>
</table>示例中的条件 VML 在我的测试中不起作用。 https://stackoverflow.design/email/templates/short-transactional/
【问题讨论】：
-
尝试在 CSS 中探索 flex/grid。您需要两个 div/部分，一个在左侧，另一个在右侧。
-
您好，这个网站是为帮助其他开发者的开发者准备的。为了让我们能够为您提供帮助，我们需要看到您的努力。你试过什么了？请分享您的代码、您的尝试、试验以及您正在努力解决的问题。这不是“we-are-doing-your-work.com”网站
-
@kiner_shah 嘿，大多数电子邮件客户端不支持 Flex/grid。
-
@toesslab 嘿，对不起，如果我似乎在要求整件事。自从我尝试了在 google 上找到的前几页后，我一直在寻求任何有用的资源，任何对所有客户都有响应的资源，但它们没有按预期工作。
-
@toesslab 这是我做的最后一个模板，它与 Outlook/mail 相去甚远。 codepen.io/Georgeslatina/pen/gOGzavj 如果我要引用一个我用过但对我没有用的来源，那就是 stackoverflow.design/email/templates/short-transactional
标签： html css email html-table html-email