2

我正在开发一封电子邮件，并希望图像仅显示在移动设备上......所以我创建了<td>一个内部有一个跨度的空，并将跨度设置为具有背景图像。

问题是，我希望图片占据一整行，而不是紧挨着标题。我试过了clear:both，display:block但我不确定为什么它不起作用。我也尝试将宽度设置为 100%，但这只是把所有东西都扔掉了......有什么建议吗？

http://jsfiddle.net/pEDSn/

.test {
    width: 41px;
    height: 41px;
    background-image: url('http://placehold.it/41x41');
    background-repeat: no-repeat;
    background-size: 41px 41px;
    display: block;
    clear: both !important;
}
4

3 回答 3

1

由于单行中 3 的排列，表格布局在和 css 上强制执行。

我建议将您的 h1 移到单独的行中。

<tr>
    <td> <!-- first td you are using as a spacer --> </td>
    <td> <span><!-- this is where your image is --></span> </td>
    <td> <!-- last column is here --> </td>
</tr>
<tr>
    <td colspan="3"><h1><!-- place your heading text here --></h1></td>
</tr>
于 2013-09-18T18:01:15.273 回答
0

background-image主要电子邮件客户端不支持在此技术中使用 a 。您应该在 style 标记中为所有不支持 css 的客户端内联标记。此外，在 Outlook 中不起作用background-image，除非它在标签中。<body>

如果您希望它仅在移动设备上显示图像，则最好使用普通图像标签并将其隐藏display:none;，然后在媒体查询中覆盖display:block;. 这仍然不适用于像 Gmail 这样的仅内联客户端，但这是更好的方法。

于 2013-09-18T18:40:17.127 回答
0

我在“test”类中​​添加了一个空行，它起作用了……检查一下：

<table id="headline_body_copy_top" width="532" border="0" cellspacing="0" cellpadding="0">


  <td align="left" valign="top">
    <h1 style="padding:0; margin:0;"><font size="5"><span class="headline_text">Ficaborio vellandebis arum inus es ema gimus, quibus vent.</span></font></h1>
  </td>
</tr>
<tr>
  <td height="25" class="marginResize">
    <!-- spacer -->
  </td>
</tr>

http://jsfiddle.net/pEDSn/2/

于 2013-09-18T18:04:55.670 回答