Question

我目前正致力于动员电子邮件模板进行工作。桌面版本应在左侧显示图像，在表格右侧显示文本。这个渲染很好，直到我尝试添加一个额外的表。它不会在新行上开始，而是在右侧开始，图像在下一行开始。

以下是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>

我之前尝试使用整个机身，这解决了问题，但解除了我创建的媒体查询。这是我正在使用的内联样式代码。我一直试图在行中应用内联块，但它似乎不会以任何不同的方式渲染任何渲染：

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

}

Answer 1

我认为你已经把“在电子邮件中使用表格”弄错了。重点不在于将每个元素包装在表中，而是将整个电子邮件放在一个大表中。一些电子邮件客户端来自上个世纪，它正确地呈现基于CSS的布局。使用表的唯一原因（除了你真的想要表）：布局。使用表格，您可以通过将元素放在表格单元格中来告诉页面上的内容。这样你就可以在没有任何CSS的情况下进行布局。

如果您坚持使用无用的，膨胀的样板代码：在表之间尝试<br>。 <br>表示“断线”。

Answer 2

尝试将float添加到innerpadding类中。还要修复一些您看不到的结束标记。此外，不确定您是否想要使用，何时完美运行。所以我改变了开头，并改为和这对我有用：

.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

堆叠表不会在新行上启动

2 个答案: