堆积表不会从新行开始

Question

我目前正在为工作调动电子邮件模板。桌面版应在 table 内在左侧显示图像，在右侧显示文本。在我尝试添加额外的 table 之前，这一切都很好。它不会在新行开始，而是图像从右侧开始，文本在下一行。

这是示例 HTML:

<body>
<tr>
<td class="innerpadding">
<table width="200" align="left" border="1" cellpadding="0" cellspacing="0">  
<tr>
<td height="200" style="padding: 0 10px 10px 0;">
<img src="images/article1.png" width="200" height="200" border="0" alt="" />
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
 <table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
 <tr>
<td>
<![endif]-->
<table class="col380" align="left" border="1" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px;" >  
<tr>
<td>
<table width="95%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. 
</td>
</tr>
</table>
</td>
</tr>
</table>
</td>
<!--This is where the next row and table begin-->
<tr>
<td class="innerpadding">
<table width="200" align="left" border="1" cellpadding="0" cellspacing="0">  
<tr>
<td height="200" style="padding: 0 10px 10px 0;">
<img src="images/article1.png" width="200" height="200" border="0" alt=""/>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
<table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
<tr>
<td>
<![endif]-->
<table class="col380" align="left" border="1" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px;">  
<tr>
<td>
<table width="95%" border="1" cellspacing="0" cellpadding="0">
<tr>
<td>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat.
</td>
</tr>
</table>
</td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</body>

我之前尝试使用 around the entire body，这解决了问题，但取消了我创建的媒体查询。这是我正在使用的内联样式代码。我一直在尝试对行应用内联块，但它似乎没有任何不同的渲染：

tr {
display:inline-block
}
.innerpadding {padding: 0px 100px 0px 0px;}
@media only screen and (min-device-width: 400px) {
.col380 {width: 380px !important;}

}

Answer 1

我认为您对 "use tables in emails" 的理解有点错误。重点不是将每个元素都包装在 table 中，而是使整个电子邮件变得很大 table。一些电子邮件客户端来自上个世纪，当时涉及正确呈现基于 CSS 的布局。使用 tables 的唯一原因（除非你真的想要 tables）：布局。使用 tables，您可以通过将元素放在 table 单元格中来判断页面上的位置。这样你就可以在没有任何 CSS.

的情况下进行布局

如果您坚持使用无用、臃肿的样板代码：请在 table 之间尝试一个 <br>。 <br> 表示 "break line".

Answer 2

尝试将 float left 添加到 innerpadding class。还要修复您似乎遗漏了一些的结束标记。此外，不确定您是否想要使用以及何时完美运行。所以我改变了开始和到和这对我有用：

.innerpadding {
    padding: 0px 100px 0px 0px;
    float: left
}





<!DOCTYPE html>
<html>

<head>

    <style>
        tr {
            display: inline-block;
        }

        .innerpadding {
            padding: 0px 100px 0px 0px;
            float: left
        }

        {
            table:;
        }
    </style>
    <title>Something</title>
</head>
<body>
<div class="innerpadding">
<table width="200" align="left" border="1" cellpadding="0" cellspacing="0">  
  <tr>
    <td height="200" style="padding: 0 10px 10px 0;">
      <img src="images/article1.png" width="200" height="200" border="0" alt="" />
    </td>
  </tr>
</table>
<!--[if (gte mso 9)|(IE)]>
  <table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
<table class="col380" align="left" border="1" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px;" >  
  <tr>
    <td>
      <table width="95%" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. 
        </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</div>
<!--This is where the next row and table begin-->
<div class="innerpadding">
<table width="200" align="left" border="1" cellpadding="0" cellspacing="0">  
  <tr>
    <td height="200" style="padding: 0 10px 10px 0;">
      <img src="images/article1.png" width="200" height="200" border="0" alt="" />
    </td>
  </tr>
</table>
<!--[if (gte mso 9)|(IE)]>
  <table width="380" align="left" cellpadding="0" cellspacing="0" border="0">
    <tr>
      <td>
<![endif]-->
<table class="col380" align="left" border="1" cellpadding="0" cellspacing="0" style="width: 100%; max-width: 600px;" >  
  <tr>
    <td>
      <table width="95%" border="1" cellspacing="0" cellpadding="0">
        <tr>
          <td>
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. In tempus adipiscing felis, sit amet blandit ipsum volutpat sed. Morbi porttitor, eget accumsan dictum, nisi libero ultricies ipsum, in posuere mauris neque at erat. 
        </td>
        </tr>
      </table>
    </td>
  </tr>
</table>
</div>
</div>
</body>
</html>

<script>


</script>
</html>

参考文献：http://www.w3schools.com/cssref/pr_class_float.asp

堆积表不会从新行开始

Stacked tables will not start on new row

html

css

html-email