如何使 images/links 的列响应式折叠电子邮件模板

Question

我的任务是让链接（也是图像）从 6 个水平链接开始，然后将它们折叠成 3 个，然后 3 个相互重叠。

这里的问题是要发送的电子邮件模板。尽管我一直在使我的模板具有响应性，但它似乎只是从水平线上的 6 个链接变为垂直对齐的 6 个链接。中间没有迷你崩溃？只是水平直线，或垂直直线。

我的主要困境是，因为这是用于电子邮件，我不得不使用内联来做所有事情 CSS，我不喜欢的东西..

我尝试过使用 flex（显然行不通）尝试过使用不同的表实现方式，但我无法让它以所需的方式折叠...

目标：让它从 6 水平方向折叠到 3 和 3 垂直方向重叠。非常感谢任何建议或帮助，谢谢。

注意我只放了 2，因为最多 6 个就没必要了，但这是我通常采用的方法

<center>
        <table border="0" cellpadding="0" cellspacing="0" width="600" id="templateColumns">
            <tr>
                <td align="center" valign="top" width="50%" class="templateColumnContainer">
                    <table border="0" cellpadding="10" cellspacing="0" width="100%">
                        <tr>
                            <td class="leftColumnContent">
                                <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
                            </td>
                        </tr>

                    </table>
                </td>
                <td align="center" valign="top" width="50%" class="templateColumnContainer">
                    <table border="0" cellpadding="10" cellspacing="0" width="100%">
                        <tr>
                            <td class="rightColumnContent">
                                <img src="http://placekitten.com/g/480/300" width="280" style="max-width:280px;" class="columnImage" />
                            </td>
                        </tr>

                    </table>
                </td>
            </tr>
        </table>
    </center>

<style type="text/css">
        @media only screen and (max-width: 640px){
            .templateColumnContainer{
                display:block !important;
                width:100% !important;
            }
        }
    </style>

Answer 1

尝试向左浮动和宽度 100% ...

Answer 2

这是使用 flex 和 div 解决您的问题的方法。我看不到嵌套表的需要。 Js Fiddle Link

Html

<div class="container">
    <div class="inner-container">
        <div class="element">
            <img src="whatever" alt="Fragrances"/>
        </div>
        <div class="element">
            <img src="whatever" alt="Wicks"/>
        </div>
        <div class="element">
            <img src="whatever" alt="Vessels"/>
        </div>
    </div>

    <div class="inner-container">
        <div class="element">
            <img src="whatever" alt="Wax"/>
        </div>
        <div class="element">
            <img src="whatever" alt="Kits"/>
        </div>
        <div class="element">
            <img src="whatever" alt="Diffusers"/>
        </div>
    </div>
</div>

和样式：

.element {
  padding: 5px;
  border: 1px black solid;
}

.inner-container {
    display:flex;
    justify-content: center;
}

@media (max-width: 600px) {
        .container {
            display: block;
        }
}

@media (min-width: 600px) {
        .container {
            display: flex;
            justify-content: center;
        }
}

Answer 3

这是最接近成功的原因，因为 flex 不能与电子邮件服务一起使用，尽管它不是内联的，但就响应式电子邮件而言，唯一不起作用的方面是：

@media (max-width: 600px) {
                   .non-flex-inner-container {
                       display: inline-block;
                   }
          }

因为据我所知这不能内联.. 这是最接近的成功：

<style type="text/css">
        .non-flex-container {
            display: inline;
            text-align: center;
            width: 100%;
            float: left;
          }

          .non-flex-inner-container {
            display: inline;
            text-align: center;
            width: 100%;
          }

          .non-flex-element {
            display: inline;
          }

          @media (max-width: 600px) {
                   .non-flex-inner-container {
                       display: inline-block;
                   }
          }

    </style>

<div class="non-flex-container">
        <div class="non-flex-inner-container">
            <div class="non-flex-element">
                <a href="#"><img src="img" alt="" width="100" height="10" style="margin:10px;"/></a>
            </div>
            <div class="non-flex-element">
                <a href="#"><img src="img" alt="" width="50" height="10" style="margin:10px;"/></a>
            </div>
            <div class="non-flex-element">
                <a href="#"><img src="img" alt="" width="70" height="10" style="margin:10px;"/></a>
            </div>
        </div><br>

        <div class="non-flex-inner-container">
            <div class="non-flex-element">
                <a href="#"><img src="img" alt= width="40" height="10" style="margin:10px;"/></a>
            </div>
            <div class="non-flex-element">
                <a href="#"><img src="img" alt="" width="40" height="10" style="margin:10px;"/></a>
            </div>
            <div class="non-flex-element">
                <a href="#"><img src="img" alt="" width="100" height="10" style="margin:10px;"/></a>
            </div>
        </div>
    </div>

这在电子邮件和内联 css 方面取得了圆满成功，但是我只能通过 AMP 页面实现这一点，显然电子邮件服务无法自由发送 amp 页面，除非该人将您列入白名单。 .. 这完全违背了目的...

width:100%; float:left;">  
        <div class="non-flex-inner-container" style="display:inline; text-align:center; width:100%;">
            <div class="non-flex-element" style="display:inline;">
                <a href=""><amp-img src="img" alt="" width="100" height="10" style="margin:10px;" media="(min-width: 600px)" /></amp-img></a>
            </div>
            <div class="non-flex-element" style="display:inline;">
                <a href=""><amp-img src="img" alt="" width="50" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img></a>
            </div>
            <div class="non-flex-element" style="display:inline;">
                <a href=""><amp-img src="img" alt="" width="70" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img></a>
            </div>
        </div>

        <div class="non-flex-inner-container" style="display:inline; text-align:center; width:100%;">
            <div class="non-flex-element" style="display:inline;">
                <a href=""><amp-img src="img" alt="" width="40" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img></a>
            </div>
            <div class="non-flex-element" style="display:inline;">
                <a href=""><amp-img src="img" alt="" width="40" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img></a>
            </div>
            <div class="non-flex-element" style="display:inline;">
                <a href=""><amp-img src="img" alt="" width="100" height="10" style="margin:10px;" media="(min-width: 600px)"/></amp-img></a>
            </div>
        </div>



        <!-- Display Inline-block when less than 600px -->
        <div class="non-flex-container" style="display:inline; text-align:center; width:100%; float:left;">  
            <div class="non-flex-inner-container" style="display:inline-block;" text-align:center; width:100%;">
                <div class="non-flex-element" style="display:inline;">
                    <a href=""><amp-img src="img" alt="" width="100" height="10" style="margin:10px;" media="(max-width: 600px)" /></amp-img></a>
                </div>
                <div class="non-flex-element" style="display:inline;">
                    <a href=""><amp-img src="img" alt="" width="50" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img></a>
                </div>
                <div class="non-flex-element" style="display:inline;">
                    <a href=""><amp-img src="img" alt="" width="70" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img></a>
                </div>
            </div>

            <div class="non-flex-inner-container" style="display:inline-block;" text-align:center; width:100%;">
                <div class="non-flex-element" style="display:inline;">
                    <a href=""><amp-img src="img" alt="" width="40" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img></a>
                </div>
                <div class="non-flex-element" style="display:inline;">
                    <a href=""><amp-img src="img" alt="" width="40" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img></a>
                </div>
                <div class="non-flex-element" style="display:inline;">
                    <a href=""><amp-img src="img" alt="" width="100" height="10" style="margin:10px;" media="(max-width: 600px)"/></amp-img></a>
                </div>
            </div>


    </div>

结论...目前还不可能....如果其他人有更多见解，请告诉我。非常感谢@Rustam Goygov 的洞察力和指导！

如何使 images/links 的列响应式折叠电子邮件模板

How can I make columns of images/links collapse responsively for an email template

html

css

flexbox

responsive