Преобразовать горизонтальный блок в вертикальный в случае, если размер экрана меньше указанного значения - PullRequest
Новая
       12

Преобразовать горизонтальный блок в вертикальный в случае, если размер экрана меньше указанного значения

0 голосов
/ 11 декабря 2018

В следующем коде я бы хотел, чтобы горизонтальный трехколонный блок отбрасывался и накладывался друг на друга в случае, если размер контейнера становится меньше X пикселей (для небольших или мобильных устройств).Как и к какому элементу таблицы следует применить это свойство.Имейте в виду, что код является блоком контента, поэтому я бы предпочел, чтобы CSS не применялся ко всему шаблону электронной почты или к электронному письму <body>, если только это не единственный способ решить эту проблему (что-то вроде использования @media only screen and (max-width: 420px)).

enter image description here

<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,sans-serif;min-width: width 500px;background-color: #f6f4f0;">

    <!-- Title: BEGIN-->
    <tr>
        <td>
            <h2>Title</h2>
        </td>
    </tr>
    <!-- Title: END-->

    <tr>
        <td>
            <table cellpadding="20">
                <tr>
                    <td style="background-color: #ffffff;" width="32%">
                        <table>

                            <tr>
                                <td>
                                    <h3>Lorem ipsum </br>dolor sit</h3>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
                                            width="1024"></a></td>
                            </tr>
                            <tr>
                                <td>
                                    Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
                                </td>
                            </tr>


                        </table>
                    </td>
                    <td>
                    </td>
                    <td style="background-color: #ffffff;" width="32%">
                        <table>

                            <tr>
                                <td>
                                    <h3>Lorem ipsum </br>dolor sit</h3>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
                                            width="1024"></a></td>
                            </tr>
                            <tr>
                                <td>
                                    Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
                                </td>
                            </tr>


                        </table>
                    </td>
                    <td>
                    </td>
                    <td style="background-color: #ffffff;" width="32%">
                        <table>

                            <tr>
                                <td>
                                    <h3>Lorem ipsum </br>dolor sit</h3>
                                </td>

                            </tr>
                            <tr>
                                <td>
                                    <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;"
                                            width="1024"></a></td>
                            </tr>
                            <tr>
                                <td>
                                    Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
                                </td>
                            </tr>


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

    </tr>
    <tr>
        <td height="30">
        </td>
    </tr>
</table>

1 Ответ

0 голосов
/ 11 декабря 2018

Вы хотите, чтобы макет только был три поперек или три вниз?Или может каждый контейнер переноситься на следующую строку при уменьшении размера экрана?

Ваш текущий код просто изменяет размеры изображений, текста и контейнеров, когда экран уменьшается.Если вы просто хотите, чтобы контейнеры переносились при уменьшении экрана, это можно сделать с помощью тегов <div> и float:left; и max-width CSS.

Основная проблема, с которой вы столкнулись, заключается в том, что каждый контейнерэто совершенно отдельная таблица, каждая из которых находится в совершенно отдельной ячейке таблицы внутри другой таблицы.

Взгляните на это (запустите фрагмент кода и используйте ссылку Full Page, чтобы проверить его): 

.container {
    background-color: #ffffff;
    max-width: 300px;
    float: left;
    margin: 10px;
    padding: 20px;
}
<table border="0" valign="top" cellpadding="10" style="font-family:arial,helvetica,sans-serif;min-width: width 500px;background-color: #f6f4f0;">

  <!-- Title: BEGIN-->
  <tr>
    <td>
      <h2>Title</h2>
    </td>
  </tr>
  <!-- Title: END-->

  <tr>
    <td>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
      <div class='container'>
        <h3>Lorem ipsum </br>dolor sit</h3>
        <a href=""><img src="https://homepages.cae.wisc.edu/~ece533/images/watch.png" style="height: auto; width: 100%;" width="1024"></a><br> Morbi auctor non ipsum quis ullamcorper. Donec et purus mi. Nunc et auctor lacus.
      </div>
    </td>
  </tr>
  <tr>
    <td height="30">
    </td>
  </tr>
</table>

Если это не то, что вы ищете, пожалуйста, дайте мне знать.

Кроме того, просто к сведению, есть несколькообласти вашего кода, которые вы должны переосмыслить.В частности, каждый раз, когда вы указываете размер, вы должны поставить его вместе с ним.то есть width="1024" .... 1024 что?Если это пиксели, используйте 1024px.И, чтобы продвинуться дальше, в элементах <img> у вас уже есть CSS с надписью width: 100%;.Таким образом, наличие width="1024" также избыточно и сбивает с толку.

...