为什么绝对不能在我的 html 表格电子邮件项目中工作？

Why absolute not working in my html table email project?

提问人：Rejuan hossain 提问时间：10/3/2023 最后编辑：Rejuan hossain 更新时间：10/3/2023 访问量：48

问：

我想在我的电子邮件模板项目中添加这个小边框。我尝试了带有绝对位置的 div。但是当我在 gmail 或 outlook 中看到输出时，位置绝对不起作用。它打破了布局。还有什么方法可以在html电子邮件模板中做这个enter image description here方形边框

Gmail 外观 -enter image description here

Document



<table align="center"  border="0" cellpadding="0" cellspacing="0" class="fullwidth" role="presentation" style="max-width: 600px;" >

<tr bgcolor="#112369">
 <td align="left" class="pl16 pr16" height="40" style="font-size:1px;line-height:1px;padding:30px 48px 0px 48px; position: relative;">
  <h1 align="left" style="padding: 5px;  margin: 0px; line-height: 35px; font-family: Arial, sans-serif; font-size: 30px; color: rgb(255, 255, 255); font-weight: bold; text-decoration: none;">
   How ACS Time Critical achieves an end-to-end service
  </h1>
  <div style="display: inline-block; border: 1px solid #00abe6; width: 20px; position: absolute; top: 26%; left: 8%;"></div>
   <div style="display: inline-block; border: 1px solid #00abe6; width: 20px; position: absolute; top: 35.5%; left: 6%; transform: rotate(90deg);"></div>
   
  </td></tr>
   <tr>
 <td align="center" class="pl16 pr16" style="font-size:1px;line-height:1px;padding:0px 48px 0px 48px;">
  <div align="left" style="font-size:1px;line-height:1px;">
  </div></td></tr>
  <tr>
 <td align="center" class="pl16 pr16" style="font-size:1px;line-height:1px;padding:0px 48px 0px 48px;">
  <div align="left" style="font-size:1px;line-height:1px;">
  </div></td></tr>
  <tr>
 <td align="center" class="pl16 pr16" style="font-size:1px;line-height:1px;padding:0px 48px 0px 48px;">
  <div align="left" style="font-size:1px;line-height:1px;">
  </div></td></tr>
  <tr>
 <td align="center" valign="top">
  <table align="center" bgcolor="#112369" border="0" cellpadding="0" cellspacing="0" class="fullwidth" style="width:600px; table-layout:fixed;" width="640">
   
    <tr>
     <td align="center" bgcolor="#112369" valign="top">
      <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
       
        <tr>
         <td class="w16" style="width:48px;" width="48">
          &nbsp;</td><td align="center" valign="top">
          <table align="center" border="0" cellpadding="0" cellspacing="0" width="100%">
           
            <tr>
             <td class="w16 h30" height="48" style="height:30px;">
              &nbsp;</td></tr></table></td><td class="w16" style="width:48px;" width="48">
          &nbsp;</td></tr></table></td></tr><tr>
     <td align="center" valign="top">
      <table align="center" bgcolor="#ffffff" border="0" cellpadding="0" cellspacing="0" width="100%">
       
        <tr>
         <td align="left" class="w16 h100" style="width: 48px; background-color: rgb(237, 247, 253);" valign="top" width="48">
          <table align="left" border="0" cellpadding="0" cellspacing="0" class="w16 h100" style="width:48px;" width="48">
           
            <tr>
             <td bgcolor="#112369" class="h100" height="75" style="height:75px;">
              &nbsp;</td></tr><tr>
             <td>
              &nbsp;</td></tr></table></td><td align="center" class="fullwidth heightauto" style="padding-bottom: 0px; background-color: rgb(237, 247, 253);" valign="top">
          <a alias="" conversion="false" data-linkto="other" href="" style="text-decoration:none;" title=""><img alt=" " data-assetid="40136" src="https://image.acs.aircharterservice.com/lib/fe2f11737364047f721479/m/1/d2642edb-1f46-4d2f-b8af-5609d10b96ca.png" style="display: block; font-family: Arial, sans-serif; font-size: 15px; line-height: 18px; color: #000000; max-width: 504px; padding: 0px; text-align: center; height: auto; width: 100%;" width="504"></a><a href="#" style="text-decoration:none;"> </a></td><td align="left" class="w16 h100" style="width: 48px; background-color: rgb(237, 247, 253);" valign="top" width="48">
          <table align="left" border="0" cellpadding="0" cellspacing="0" class="w16 h100" style="width:48px;" width="48">
           
            <tr>
             <td bgcolor="#112369" class="h100" height="75" style="height:75px;">
              &nbsp;</td></tr><tr>
             <td>
              &nbsp;</td></tr></table></td></tr></table></td></tr></table></td>
            </tr>
          </table>
html css 模板 outlook html-email

评论

1赞 Qiimiia 10/3/2023
您到底想在哪里添加浅蓝色边框？
1赞 Rejuan hossain 10/3/2023
在像屏幕截图一样的那个确切位置。我试过了，但它在 gmail 上不起作用，我的意思是定位不起作用@Qiimiia
1赞 Qiimiia 10/3/2023
还请分享代码在 gmail 上的外观截图
1赞 Rene van den Berg 10/3/2023
您不能在多个电子邮件客户端中使用。Gmail肯定不允许。对不起，我不知道有什么好的解决方案。position: absolute
1赞 Rejuan hossain 10/3/2023
我分享了此代码的Gmail外观的屏幕截图。请入住最热门@Qiimiia

答：

0赞 Qiimiia 10/3/2023 #1

尝试使用不同的 HTML 标签/CSS 样式来实现您想要的功能。一种方法是添加 2 小时标签：

<td ...>
    <hr style="
        height: 2px !important;
        background-color: #00abe6;
        width: 55px;
        margin-left: 0px;
        margin-top: 0px;
        transform-origin: 0 50%;
        transform: rotate(90deg);
        border: none;
    ">


    <hr style="
        height: 2px !important;
        background-color: #00abe6;
        width: 55px;
        margin-left: 0px;
        margin-top: -2px;
        border: none;
    ">
    <h1...></h1>
</td>

评论

0赞 Rejuan hossain 10/4/2023
无法在 Gmail 上运行。:( @Qiimiia

上一个：在设置中找不到“django”的配置。模板

下一个：Golang 模板变量未呈现