Как сделать так, чтобы столбцы изображений / ссылок быстро сворачивались для шаблона электронной почты?

Question

Мне было дано задание сделать ссылки (которые также являются изображениями) go из 6 горизонтальных ссылок, затем свернуть их в 3, а затем 3 друг на друга.

Подвох здесь его по электронной почте шаблон для отправки. И хотя я делаю свой шаблон отзывчивым, он выглядит как go из 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

Вот решение вашей проблемы, используя 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 2

Это то, что получило самый близкий успех, так как 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 за понимание и руководство!

Answer 3

Попробуйте плавать влево и ширину 100% ...