html - 如何在 HTML 电子邮件 css 中对齐表格

Question

在普通桌面 View 中，我希望它显示在 2 列中，左边是文字，右边是图片。但在移动 View 中，我只想要 1 列，而且图像将位于文本之上。我想在 HTML 电子邮件上执行此操作。任何人都知道如何覆盖表格从左到右对齐？我下面的 CSS 似乎不起作用，颜色确实变成了红色。或者其他方法？

<style type="text/css">
@media (max-width: 480px) {
  .chunk {
    width: 100% !important;
  }
  table.chunk:first-child{align:right!important;color:red!important;}
}
</style>

<table style="width: 600px;" class="main-table">
    <tr> 
    <td>

         <table align="left" style="width: 50%;" class="chunk">
            <tr><td>some text</td></tr>

         </table>

         <table align="left" style="width: 50%;" class="chunk">
            <tr><td>some image</td></tr>
          </table>
    </td>
  </tr>
</table>

Answer 1

表格很笨重，通常不响应屏幕尺寸。

更好的方法是使用样式为 float: left 的 div 和 div，您可以 float :右。

然后，每当您对较小的屏幕尺寸进行媒体查询时，您都可以更改样式以删除 float。