Html 如何使电子邮件模板的图像/链接列响应性地折叠_Html_Css_Flexbox_Responsive

Html 如何使电子邮件模板的图像/链接列响应性地折叠

html css

Html 如何使电子邮件模板的图像/链接列响应性地折叠,html,css,flexbox,responsive,Html,Css,Flexbox,Responsive,我的任务是使链接（也是图像）从6个水平链接开始，然后将它们折叠成3个，然后再将3个放在一起这里的陷阱是要发送的电子邮件模板。虽然我一直在使我的模板响应，但它似乎只是从水平线中的6个链接，到垂直对齐的6个链接。没有迷你们之间的崩溃？只是水平直线，或垂直直线我的主要困境，是因为这是电子邮件，我被迫做一切与内联CSS，我不喜欢的东西我尝试过使用flex（显然行不通）尝试过使用不同的表实现，但我无法让它以期望的方式崩溃目标：从水平移动6到垂直折叠3和3。非常感谢您的任何建议或帮助，谢谢注意，我

我的任务是使链接（也是图像）从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>


@仅介质屏幕和（最大宽度：640像素）{
.templateColumnContainer{
显示：块！重要；
宽度：100%！重要；
}
}

尝试向左浮动，宽度100%…

以下是使用flex和div解决问题的方法。我认为不需要嵌套表。

Html

这是最成功的，因为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>


.非弹性容器{
显示：内联；
文本对齐：居中；
宽度：100%；
浮动：左；
}
.非柔性内容器{
显示：内联；
文本对齐：居中；
宽度：100%；
}
.非弹性元件{
显示：内联；
}
@介质（最大宽度：600px）{
.非柔性内容器{
显示：内联块；
}
}

这在电子邮件和内联css方面是完全成功的，但是我只能通过AMP页面实现这一点，显然电子邮件服务无法免费发送AMP页面，除非所述人员将您列入白名单。。。这完全违背了目的不管

宽度：100%；浮动：左；">

结论…现在还不可能…如果其他人有更多的见解，请让我知道。非常感谢@Rustam Goygov提供的见解和指导！

提供示例代码、您尝试过的内容等。出于某种原因，对不起，我没有打印出来，它在我完成之前就提交了帖子。我编辑了它，并添加了假设内容感谢您的建议，但它仍然具有相同的行为，即捕捉到6个垂直对齐的直线图像，而不是慢慢折叠成更小的列。感谢Rustam！这正是我试图做的，但没有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>

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>