html - 图片旁边的通讯文本模板代码 - 与某些电子邮件客户端的兼容性问题

Question

我正在尝试创建一个电子邮件模板，用于每周一次通过 mailchimp 发送 rss 帖子。
我遇到了问题，但并非所有电子邮件客户端都遇到了问题。
我需要在图像旁边显示文本(在 PC 上)和图像下方的文本(在较小的设备上)，我的代码就是这样做的，但由于某种原因在雷鸟上它显示错误。

我编辑了代码，以显示工作代码。

  <div class="mcnTextContent">
    <style type="text/css">
      .testsitenewsletterimage11 p {
        float: left !important;
      }
      .testsitenewslettertxt11 p {
        display: inline-block!important;
        padding-left: 20px;
        width: 50%;
      }
      .testsitenewslettertxt11 hr {
        width: 100% !important;
      }
         .endfeedrss {
        display: block!important;
               clear: both;

      }
        .testsitenewsletterstart {
        display: block!important;
      }

      .im {
        color: #757575 !important;
      }

    </style>

   <div class="testsitenewsletterstart">
       *|FEEDBLOCK:http://testsite.edu.gr/category/%CE%B5%CE%BA%CF%80%CE%B1%CE%B9%CE%B4%CE%B5%CF%85%CF%84%CE%B9%CE%BA%CE%B1-%CE%BD%CE%B5%CE%B1/feed/|*
    *|FEEDITEMS:[$count=3]|*
    <div class="testsitenewsletterimage11">

      <p><a href="*|FEEDITEM:URL|*">*|FEEDITEM:IMAGE|*</a></p>
      <div class="testsitenewslettertxt11">
        <p>
          <span style="font-size:14px">*|FEEDITEM:DATE|*</span><br />
          <strong>*|FEEDITEM:TITLE|* </strong><br />
          <a href="*|FEEDITEM:URL|*">👉 &Mu;ά&theta;&epsilon;&tau;&epsilon;
            &Pi;&epsilon;&rho;&iota;&sigma;&sigma;ό&tau;&epsilon;&rho;&alpha;</a>
            <br />
        </p>


      </div>

    </div>
          <span class="endfeedrss"> 
          <hr /> <br />
    *|END:FEEDITEMS|* *|END:FEEDBLOCK|*
       </span>
      </div>


  </div>

• 我想在 PC 上实现的目标:https://imgur.com/rtEYN0E
• thunderbird 上的问题(在 PC 上):https://imgur.com/oLPRG0k

谁能告诉我如何解决 thunderbird 上的问题？我无法调试，因为我不知道如何像在 firefox“Element Inspector”中那样检查 thunderbird 电子邮件代码

谢谢

Answer 1

试试这个。我没有在 Thunderbird 中测试它的选项。我更改了 br 标记和他的类的顺序。

    <div class="mcnTextContent">
      <style type="text/css">
        .testsitenewsletterimage11 p {
          float: left !important;
        }
        .testsitenewslettertxt11 p {
          display: inline !important;
          padding-left: 20px;
          width: 50%;
        }
        .testsitenewslettertxt11 hr {
          width: 100% !important;
        }
        .im {
          color: #757575 !important;
        }
      </style>

      *|FEEDBLOCK:http://testsite.edu.gr/category/%CE%B5%CE%BA%CF%80%CE%B1%CE%B9%CE%B4%CE%B5%CF%85%CF%84%CE%B9%CE%BA%CE%B1-%CE%BD%CE%B5%CE%B1/feed/|*
      *|FEEDITEMS:[$count=3]|*
      <div class="testsitenewsletterimage11">
        <p><a href="*|FEEDITEM:URL|*">*|FEEDITEM:IMAGE|*</a></p>
        <div class="testsitenewslettertxt11">
          <p>
            <span style="font-size:14px">*|FEEDITEM:DATE|*</span><br />
            <strong>*|FEEDITEM:TITLE|* </strong><br />
            <a href="*|FEEDITEM:URL|*">👉 &Mu;ά&theta;&epsilon;&tau;&epsilon;
              &Pi;&epsilon;&rho;&iota;&sigma;&sigma;ό&tau;&epsilon;&rho;&alpha;</a
            ><br />
          </p>
          <hr />
        </div>
      </div>
      *|END:FEEDITEMS|* *|END:FEEDBLOCK|*
    </div>