Как сделать так, чтобы этот отзывчивый столбец переносился под правый столбец? - PullRequest
0 голосов
/ 05 января 2019

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

Я пытаюсь сделать так, чтобы текст в левом столбце был перенесен под правый столбец на рабочем столе, а в мобильном - правый стек столбцов под левым столбцом.

Я не знаком с какими-либо хитростями с этим, и я искал на сайте другие темы, которые я не нашел. Кто-нибудь знает, возможно ли это?

Любая помощь очень ценится.

<!doctype html>
<html>
  <head>
    <meta name="viewport" content="width=device-width" />
    <meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
    <meta name="author" content="mangools.com" />
    <link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro" rel="stylesheet"> 
  
    <!-- Gmail desktop web app doesn't support <style> tag in head so have to inline the styles to elemnts -->
    <style>
        
      table.column-1-2 {
          margin-right: 25px;
      }
      /* Most mobile clinets supports css @media queries so you can define styles for theme here */
      @media only screen and (max-width: 640px) {
        .container {
            width: 100% !important;
            max-width: 100% !important;
        }
        table.column-1-2 {
            float: none !important;
            margin-right: 0 !important;
            width: 100% !important;
            text-align: center !important;
        }
      }

      /* Override the .container width for email clients supporting <style> and @media queries */
      @media only screen and (min-width: 641px) {
        .container {
            max-width: 600px !important;
        }
      }
    </style> 
  </head>
  <body style="margin: 0; font-family: 'Source Sans Pro', sans-serif; font-size: 14px;">
    <table style="border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
      <tr>
        <!-- The next cell is baselically the "<body>" for our email - you can set background and vertical padding here here -->
        <td style="background: white; padding: 50px 0;">
            <!-- Add this condition to center the email in MS Outlook -->
            <!--[if mso]>
                <table style="width: 600px;" align="center"><tr><td>
            <![endif]-->
            
            <!-- 
                The next table defines the template widt and centers the whoe template.
                Define the email container width here "width" attribute. 
                Add class .container. It is important for setting up the right width of entire email template.
                See more in <style> tag in <head>.
            -->
            <div style="max-width: 600px; margin: 0 auto;">
                <table class="container" style="border-collapse: collapse;" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
                          <tbody>
                            <tr>
                              <td>
            
                              
            
                                <!-- Set of 2 columns -->
            
                                  <!-- 
                                    Set width to half of width of container and add align="left" 
                                    to float the table to the left and make column of it. 
                                  -->
                                  <table class="column-1-2" width="400" align="left" style="border-collapse: collapse;" cellspacing="0" cellpadding="0" border="0">
                                    <tbody>
                                      <tr>
                                        <td style="padding: 20px 25px; background: white; color: black; text-align: center;" valign="top">
                                        <p style="text-align:left;">
                                        
                                          Dear --MarketingSalutation--,
<br><br>
 

Lorem ipsum dolor sit amet, rebum delectus vix ad, scripta percipitur nec id, per quas bonorum denique an. Te iudicabit reprehendunt mei. Noluisse moderatius te nec, qui omnesque pertinax repudiare ne. Ius ut commune pericula, duis justo sit cu. At quo atqui persecuti, no altera docendi sed. Id commune delectus his, ea vim sanctus appellantur.
 <br><br>

Lorem ipsum dolor sit amet, rebum delectus vix ad, scripta percipitur nec id, per quas bonorum denique an. Te iudicabit reprehendunt mei. Noluisse moderatius te nec, qui omnesque pertinax repudiare ne. Ius ut commune pericula, duis justo sit cu. At quo atqui persecuti, no altera docendi sed. Id commune delectus his, ea vim sanctus appellantur.

 <br><br>

Lorem ipsum dolor sit amet, rebum delectus vix ad, scripta percipitur nec id, per quas bonorum denique an. Te iudicabit reprehendunt mei. Noluisse moderatius te nec, qui omnesque pertinax repudiare ne. Ius ut commune pericula, duis justo sit cu. At quo atqui persecuti, no altera docendi sed. Id commune delectus his, ea vim sanctus appellantur.
 <br><br>
 
  

Lorem ipsum dolor sit amet, rebum delectus vix ad, scripta percipitur nec id, per quas bonorum denique an. Te iudicabit reprehendunt mei. Noluisse moderatius te nec, qui omnesque pertinax repudiare ne. Ius ut commune pericula, duis justo sit cu. At quo atqui persecuti, no altera docendi sed. Id commune delectus his, ea vim sanctus appellantur.

  <br><br>

Lorem ipsum dolor sit amet, rebum delectus vix ad, scripta percipitur nec id, per quas bonorum denique an. Te iudicabit reprehendunt mei. Noluisse moderatius te nec, qui omnesque pertinax repudiare ne. Ius ut commune pericula, duis justo sit cu. At quo atqui persecuti, no altera docendi sed. Id commune delectus his, ea vim sanctus appellantur.
 <br><br>

Best,
 <br><br>

Chief Executive Officer

 
 
 
 
</p>

                                        </td>
                                      </tr>
                                    </tbody>
                                  </table>
            
                                  <!-- The div's width is automatically 100% and previous table can float it, so it fills the second half -->
                                  
                                  
                                  
                                  <div style="padding: 10px; background: #F1EFEF; text-align: left; margin-top:70px;">
                                    <div style="padding: 20px 0">




 
 
  
  <li style="color: #49DBC3; font-size: 22px; margin-top:5px; margin-bottom:30px; font-family: 'Lato', Arial, sans-serif;"><span style="font-size: 16px; color: #555555;">Using <a href="https://www.merceradvisors.com/" style=" ">Factor Investing</a> to Enhance Your Portfolio Podcast</span></li>
 

  
 
 <li style="color: #49DBC3; font-size: 22px; margin-top:30px; margin-bottom:30px; font-family: 'Lato', Arial, sans-serif;"><span style=" font-size: 16px; color: #555555;">Are You Maximizing the New <a href="https://www.merceradvisors.com/" style> Tax Laws?</a></span></li>

 
 <li style="color: #49DBC3; font-size: 22px; margin-top:30px; margin-bottom:30px; font-family: 'Lato', Arial, sans-serif;"><span style=" font-size: 16px; color: #555555;">Deciding to <a href="https://www.merceradvisors.com/" style=" ">Retire?</a></span></li>
  <br />






                                    </div>
                                  </div>
                                <!-- End of two set columns -->
            
                                <!-- One full width column -->
                                <table width="100%" style="border-collapse: collapse;" cellspacing="0" cellpadding="0" border="0">
                                  <tr>
                                    <td style="padding: 25px; background: #f2f2f2; text-align: center;" style="border-collapse: collapse;" cellspacing="0" cellpadding="0" border="0" valign="top">
                                     text
                                    </td>
                                  </tr>
                                </table>
                                
                                <table width="100%" style="border-collapse: collapse;" cellspacing="0" cellpadding="0" border="0">
                                  <tr>
                                    <td style="padding: 25px; background: #f2f2f2; text-align: center;" style="border-collapse: collapse;" cellspacing="0" cellpadding="0" border="0" valign="top">
                                   
                                   
                                   text
                                    </td>
                                  </tr>
                                </table>
                                
                                
            
                              </td>
                            </tr>
                          </tbody>
                        </table>
                <!-- End of .container table -->
            </div>
          
            <!-- Add this condition to center the email in MS Outlook -->
            <!--[if mso]>
            </td></tr></table>
            <![endif]--> 
        </td>
      </tr>
    </table>
  </body>
</html>
...