如何让动态加载的Div在HTML邮件简报中横向并排显示？

嘿，刚接触HTML/CSS能做到动态加载RSS内容已经超棒啦！邮件排版确实是个大坑——毕竟各种邮件客户端（尤其是Outlook这种老顽固）对现代CSS和框架的支持差得离谱，你用的Bootstrap栅格类在邮件里基本起不了作用，这就是为什么新加的文章会跑到下面的原因：每个文章块是块级元素，默认会换行，而且Bootstrap的响应式规则邮件客户端根本不买账。

给你个最稳妥的解决方案，用表格布局——这是邮件行业的标准做法，所有客户端都能正确渲染横向排列的内容：

第一步：准备外层容器 #

先创建一个父级表格，所有动态加载的文章都会放到这个表格的<tr>里：

<table style="width: 100%; border-collapse: collapse;" cellpadding="0" cellspacing="0">
  <tr id="articles-container">
    <!-- 这里会动态插入每个文章的单元格 -->
  </tr>
</table>

第二步：修改单个文章的代码 #

把你原来的文章块改成表格单元格<td>，并且把所有样式都写成inline（邮件里类样式大概率会被忽略）。这里我调整了样式，确保兼容性和美观：

<td style="width: 25%; padding: 10px; vertical-align: top;">
  <div style="border: 1px solid #eee; border-radius: 4px; overflow: hidden;">
    <!-- 缩略图 -->
    <img src="http://cloud-files.crsend.com/img/noimage.png" style="width: 100%; display: block; margin: 0;" alt="文章缩略图" />
    <!-- 标题和摘要区域 -->
    <div style="padding: 10px; text-align: center;">
      <h4 style="margin: 0 0 8px 0; font-size: 14px;">
        <!--#html name="title" #-->Thumbnail label<!--#/html#-->
      </h4>
      <p style="margin: 0 0 10px 0; font-size: 12px; color: #666;">
        <!--#html name="description" #-->Lorem ipsum dolor sit amet, consectetur adipisicing elit...<!--#/html#-->
      </p>
      <p style="margin: 0;">
        <a href="#" style="display: inline-block; padding: 4px 8px; background: #5bc0de; color: #fff; text-decoration: none; border-radius: 4px; font-size: 12px;">查看详情</a>
        <a href="#" style="display: inline-block; padding: 4px 8px; background: #fff; color: #333; text-decoration: none; border: 1px solid #ccc; border-radius: 4px; font-size: 12px; margin-left: 4px;">收藏</a>
      </p>
    </div>
  </div>
</td>

为什么这样能解决问题？ #

1. 表格的兼容性：所有邮件客户端都能正确识别表格的横向布局，不会像div那样自动换行。
2. 固定宽度的单元格：给<td>设置width:25%意味着一行能放4个文章块（如果要3个就改成33.33%），新加的文章会自动排在右侧。
3. Inline样式：邮件客户端几乎都会忽略外部样式表和内部样式类，所以把样式直接写在标签里才靠谱。
4. 图片处理：给img加display:block能避免图片下方出现莫名的空白，这是邮件里常见的小坑。

额外小提示 #

如果想让邮件在手机上自动变成单列显示，可以在邮件头部加一段媒体查询（不过只有iOS Mail、Gmail移动端等现代客户端支持，Outlook桌面版还是会保持多列）：

<style>
@media only screen and (max-width: 600px) {
  #articles-container td {
    width: 100% !important;
    display: block !important;
  }
}
</style>

慢慢摸索邮件排版的坑，你已经做得很好啦！

内容的提问来源于stack exchange，提问作者MiPe28