Question

对于电子邮件模板，我想要这样的输出 在宽屏上

但在小屏幕上（例如移动设备或@media (max-width: 768px)），我想要这样的输出

要在内部CSS中实现此目的，我使用了引导程序

<div class="col-xs-6 col-sm-4">
    <img src="http://icons.iconarchive.com/icons/mahm0udwally/all-flat/256/User-icon.png" alt="img1" class="img-thumbnail" />
</div>

但是我想使用内联CSS来实现，真正的问题是如何在单个标签中同时使用col-xs-6和col-sm-4的样式？

With Internal CSS和With Inline CSS

PS：内联CSS中不允许@media标签。这是一个电子邮件模板，这就是为什么需要使用内联CSS的原因。

Answer 1

在text-align：center内部使用display：inline-block

<div style="text-align:center">
     <img style= "width:100px;display:inline-block" >
    <img style= "width:100px;display:inline-block">
    <img style= "width:100px;display:inline-block">
</div>

https://jsfiddle.net/70qfn3d8/

Answer 2

此解决方案基于CSS。 JavaScript无法在电子邮件中使用，因为大多数电子邮件客户端都剥离并禁用了JavaScript。

此答案基于使用电子邮件模板Cerberus。我想，尽管您可以在任何响应式现代电子邮件模板上使用它。

您需要的是@media查询中的几个样式表类，一个用作容器的表，然后是一个三列表。

样式表：

<style>
@media screen and (max-width: 600px) {
    .email-container {
        width: 100% !important;
        margin: auto !important;
    }
    .stack-column-center {
        display: block !important;
        width: 100% !important;
        max-width: 100% !important;
        direction: ltr !important;
        float: left !important;
    }
    .stack-column-center-50 {
        width: 50% !important;
        max-width: 50% !important;
        direction: ltr !important;
        display: inline-block;
    }
}
</style>

HTML代码：

<table align="center" role="presentation" cellspacing="0" cellpadding="0" border="0" width="600" style="margin: 0 auto;" class="email-container">
  <tr>
    <td valign="top" style="padding: 10px; background-color: #ffffff;">
        <table role="presentation" cellspacing="0" cellpadding="0" border="0" width="100%" style="outline: 1px solid #f00;">
            <tr>
                <!-- Column : BEGIN -->
                <td width="33.33%" class="stack-column-center-50">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td style="padding: 10px; text-align: center">
                                <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                            </td>
                        </tr>
                        <tr>
                            <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
                                <p style="margin: 0;"><strong>Column 1</strong><br />Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- Column : END -->
                <!-- Column : BEGIN -->
                <td width="33.33%" class="stack-column-center-50">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td style="padding: 10px; text-align: center">
                                <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                            </td>
                        </tr>
                        <tr>
                            <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
                                <p style="margin: 0;"><strong>Column 2</strong><br />Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- Column : END -->
                <!-- Column : BEGIN -->
                <td width="33.33%" class="stack-column-center">
                    <table role="presentation" cellspacing="0" cellpadding="0" border="0">
                        <tr>
                            <td style="padding: 10px; text-align: center">
                                <img src="https://via.placeholder.com/170" width="170" height="170" alt="alt_text" border="0" class="fluid" style="height: auto; background: #dddddd; font-family: sans-serif; font-size: 15px; line-height: 15px; color: #555555;">
                            </td>
                        </tr>
                        <tr>
                            <td style="font-family: sans-serif; font-size: 15px; line-height: 20px; color: #555555; padding: 0 10px 10px; text-align: left;" class="center-on-narrow">
                                <p style="margin: 0;"><strong>Column 3</strong><br />Maecenas sed ante pellentesque, posuere leo id, eleifend dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos.</p>
                            </td>
                        </tr>
                    </table>
                </td>
                <!-- Column : END -->
            </tr>
        </table>
    </td>
  </tr>
</table>

我在Litmus中对此进行了测试，它可以在每个桌面式电子邮件客户端和支持@media查询的移动客户端中使用。如果您下载Cerberus，则只需做两项更改，添加类.stack-column-center-50并复制该表并将其粘贴到电子邮件正文表中。除了在表中添加第1、2、3列之外，我没有进行其他更改。

Cerberus模板： https://tedgoas.github.io/Cerberus/

编辑：您可以将col-xs-6和col-sm-4的值合并到600像素以下的col-xs-6的新标签中。或者，如果您想保留当前类的工作方式，请创建一个新标签。我的示例仍然可以使用新名称。

祝你好运。

Answer 3

通过在内部图像上使用最小长度的外部div和width:33.33333333%; min-width: 92px;display:inline-block来解决。

演示https://jsfiddle.net/70qfn3d8/4/

<div style="min-width: 190px;">
     <div style="text-align:center">
          <img style= "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width: 170px !important; border:1px solid #ddd;vertical-align:middle;display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;min-height:1px;padding-right:10px;padding-left:10px;width:33.33333333%; min-width: 92px;display:inline-block" src ="http://icons.iconarchive.com/icons/mahm0udwally/all-flat/256/User-icon.png">
          <img style= "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width: 170px !important; border:1px solid #ddd;vertical-align:middle;display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;min-height:1px;padding-right:10px;padding-left:10px;width:33.33333333%; min-width: 92px;display:inline-block" src ="http://icons.iconarchive.com/icons/mahm0udwally/all-flat/256/User-icon.png">
          <img style= "-webkit-box-sizing:border-box;-moz-box-sizing:border-box;box-sizing:border-box;max-width: 170px !important; border:1px solid #ddd;vertical-align:middle;display:inline-block;max-width:100%;height:auto;padding:4px;line-height:1.42857143;background-color:#fff;border-radius:4px;-webkit-transition:all .2s ease-in-out;-o-transition:all .2s ease-in-out;transition:all .2s ease-in-out;min-height:1px;padding-right:10px;padding-left:10px;width:33.33333333%; min-width: 92px;display:inline-block" src ="http://icons.iconarchive.com/icons/mahm0udwally/all-flat/256/User-icon.png">
     </div>
</div>

内联CSS，电子邮件模板的@media标签解决方案

With Internal CSS和With Inline CSS

3 个答案: