html - 在 HTML 电子邮件中排列 <td>

标签 html responsive-design html-email

我正在制作一个响应式电子邮件模板。我遇到的问题是我希望图标与文本左侧对齐。我怎样才能做到这一点?我已经被困在这个问题上一段时间了。

编辑:这是一个带有文字的更新,因为除非我有更多的冗长的文字和更少的代码,否则我无法保存我的更改。

<body yahoo="yahoo" bgcolor="#f6f8f1">
    <!--[if (gte mso 9)|(IE)]>
<table width="600" align="center" cellpadding="0" cellspacing="0" border="0">
    <tr>
        <td>
            <![endif]-->
    <table width="100%" bgcolor="#f6f8f1" border="0" cellpadding="0" cellspacing="0">
      <tr>
        <td class="header" bgcolor="c7d8a7">
          <table class="content" align="center" cellpadding="0" cellspacing="0" border="0">
            <tr>
              <td>
                <table width="70" align="left" border="0" cellpadding="0" cellspacing="0">
                  <tr>
                    <td height="70" style="padding: 0 20px 20px 0;">
                      <img src="http://i.imgur.com/38a0Gpi.png" width="70" height="70" border="0" alt="" />
                      <!--[if (gte mso 9)|(IE)]>
                                                <table width="425" align="left" cellpadding="0" cellspacing="0" border="0">
                                                    <tr>
                                                        <td>
                                                        <![endif]-->
                      <table class="col425" align="left" border="0" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 425px;">
                        <tr>
                          <td height="70">
                            <table width="100%" border="0" cellspacing="0" cellpadding="0">
                              <tr>
                                <td class="subhead" style="padding: 0 0 0 3px;">
                                  COFFEE SHOP
                                </td>
                              </tr>
                              <tr>
                                <td class="h1" style="padding: 5px 0 0 0;">
                                  Responsive Email Mockup
                                </td>
                              </tr>
                            </table>
                          </td>
                        </tr>
                      </table>
                      <!--[if (gte mso 9)|(IE)]>
                                           </td>
                                        </tr>
                                        </table>
                                        <![endif]-->
                    </td>
                  </tr>
                </table>
              </td>
            </tr>
          </table>
        </td>
      </tr>
    </table>
    <!--[if (gte mso 9)|(IE)]>
        </td>
    </tr>
</table>
<![endif]-->
  </body>

最佳答案

像这样吗?

我将图像包裹在 td 中添加 </td><td> 自己的img之后

<td height="70" style="padding: 0 20px 20px 0;">
    <img src="http://i.imgur.com/38a0Gpi.png" width="70" height="70" border="0" alt="" />
</td>
<td>
    <!--[if (gte mso 9)|(IE)]>

关于html - 在 HTML 电子邮件中排列 <td>,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35470903/

相关文章:

html - <span> 对搜索引擎有意义吗?

javascript - 单击一个按钮显示,其他地方隐藏

javascript - PHP JS 链接动态列表

html - 设置多个容器的高度为两个固定div之间的剩余高度

loops - MailJet 嵌套循环

html - 如何删除 HTML 电子邮件中两个表格之间的空格?

jQuery : Hover on img to change img and text

html - 在 Bootstrap 网站上找不到 .img-responsive

html - 会显示: table work if the container is set in vh not pixels or percent

css - 电子邮件模板中带图片的动态标题样式