我有正在使用的两列电子邮件模板。
我正在尝试将左列文本包装在台式机的右列下，并在移动设备的左列下保留右列堆栈。
我不熟悉任何技巧，因此我在网站上搜索了其他未找到的主题。有人知道这是否可能吗？
非常感谢您的帮助。
<!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>