Question

另一个表格问题。在任何人建议不使用内联样式之前，我这样做是为了让所有电子邮件客户端都能阅读它。否则我通常不会这样做。此外，我正在使用表格，因为它必须支持旧的电子邮件客户端。

考虑到这一点就是这个例子。 http://jsfiddle.net/rcZZb/16/

HTML：

<body>
  <table cellspacing="0" border="0" align="left" style="background: #fff;" cellpadding="0"; width="639">
    <tr>
      <td style="line-height:0;" colspan="2"><img src="http://www.artaholic.com/html/jsfiddle/img/header.jpg" width="639" height="84" vspace="0" hspace="0"></td>
    </tr>
    <tr>
      <td style="line-height:0;" colspan="2"><img src="http://www.artaholic.com/html/jsfiddle/img/banner.jpg" width="639" height="156" vspace="0" hspace="0"></td>
    </tr>
      <tr>
          <td width="375" style="border:1px solid red;"><span style="padding:30px">Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo.</span>
       </td>
       <td width="264" height="158" style="border:1px solid red; background: url('http://www.artaholic.com/html/jsfiddle/img/box-bg.jpg'); font: normal 15px Arial, sans-serif; color:#0098d6;"><span style="padding:20px;">
           ntium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta</span>
      </td>
      </tr>
  </table>
</body>

非内联CSS：

body{
    padding:0;
    margin:0
}

我正在尝试控制2个红色边框中的文字。现在它水平和垂直居中。我希望能够使用padding来控制它，以指定它应放在每个框内的位置。当我在padding上设置td时，它会通过扩展它来解除右侧框中的background-image。如果我将文本放在span内并使用padding设置样式，则只有第一行以文字形式移动。

如何在不影响每个框width的情况下控制框内的文字位置？

由于

Answer 1

尝试更改<span>和<div>;您需要该元素为diplay:block，而不是display:inline。

我更新了您的jsfiddler以使用这两种方法：第一个插入display: block，第二个更改为<div>：http://jsfiddle.net/rcZZb/17/

Answer 2

啊我想用p标签而不是跨度计算出来。 p不是内联标记，并且在较旧的电子邮件客户端中受支持。感谢大家的回答。

表格问题的电子邮件

2 个答案: