我正在使用dotmailer中的新响应模板，所有元素现在都是块表，没有多列表。我想在响应环境中的左表元素上堆叠右表元素，同时在桌面上保持左/右排列。
以下是我正在使用的完整元素的代码
我已经尝试将该元素创建为带有列的表，但是当我这样做时无法保存文件，我已尝试使用表格ID上的浮点数，表格，td和内联css，其中一些配置会翻转在桌面上订购而不是电话。 （我特别关注iphone6）
是否可以翻转块元素上的堆叠？
<table border="0" cellpadding="0" cellspacing="0" align="center" width="100%" class="row two-cols ee_columns ee_element" ee-type="container" data-title="2 columns" style="position: relative; background-color: rgb(174, 184, 194);">
<tbody>
<tr>
<td align="center" valign="top" class="row-inner f-size-0 element-pad" dir="ltr" style="padding: 0px 10px 0px 0px;"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:650px;" width="650" class="mso-table-width"><tr><td align="left" valign="top" style="width:331px;" width="320" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="stack-column stack-column-width" ee-percent-width="51" style="max-width: 50.92%; min-width: 331px; width: 650px;" id="right-stack">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="stack_bottom">
<tbody>
<tr>
<td dir="rlt" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellpadding="0" cellspacing="0" class="col-font-reset ee_element" ee-type="element">
<tbody>
<tr>
<td align="left" class="element-pad element-bord" style="padding: 0px;"><img src="img" alt="" style="width: 100%; display: block; height: auto;" class="ee_editable vedpw331" ee-width="331" border="0" width="331" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td><td align="left" valign="top" style="width:325px;" width="325" class="column"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="stack-column stack-column-width" ee-percent-width="49" style="max-width: 49.07%; min-width: 319px; width: 650px;" id="left-stack">
<table width="100%" border="0" cellpadding="0" cellspacing="0" id="stack_top">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table width="100%" border="0" cellspacing="0" cellpadding="0" class="ee_element ee_spacer col-font-reset" ee-type="element">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 10px;" alt="" class="" border="0" width="1" height="10" /></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="col-font-reset ee_element" width="100%" ee-type="element">
<tbody>
<tr>
<td valign="top" align="left" class="element-pad element-bord"><div class="ee_editable">
<p class="h3" style="text-align: left; font-size: 17px; color: rgb(255, 255, 255); line-height: 120%;"><b><a href="http://sidekickmag.com/dental-technology/digital-technology-delivers-excellence-in-same-day-restorations/?campaignkw=same_day&_linkgroups=technology" style="color: rgb(255, 255, 255); text-decoration: none;">Headline</a></b></p>
</div></td>
</tr>
</tbody>
</table>
<table cellpadding="0" cellspacing="0" class="col-font-reset ee_element" width="100%" ee-type="element">
<tbody>
<tr>
<td valign="top" align="left" class="element-pad element-bord"><div class="ee_editable">
<p style="font-size: 14px; color: rgb(255, 255, 255); line-height: 120%;" class="col-text">Text elements here</p>
</div></td>
</tr>
</tbody>
</table>
<table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:319px;" width="319" class="mso-table-width"><tr><td align="left" valign="top" style="width:319px;" width="330" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 20px;padding-bottom: 0px;padding-left: 20px;" class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:279px;" width="279" class="mso-table-width"><tr><td align="left" valign="top" style="width:279px;" width="290" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td dir="ltr" class="col-inner ee_dropzone" align="left"><table class="ee_element ee_spacer col-font-reset" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 20px;" alt="" class="" width="1" border="0" height="20" /></td>
</tr>
</tbody>
</table>
<table style="max-width: 100%; position: relative; table-layout: auto;" class="row one-cols ee_columns ee_element" ee-type="container" data-title="Columns" width="100%" cellspacing="0" cellpadding="0" border="0" align="center">
<tbody>
<tr>
<td style="padding-top: 0px;padding-right: 0px;padding-bottom: 0px;padding-left: 0px;" class="row-inner f-size-0 element-pad col-inner" valign="top" align="center"><!--[if mso]><table border="0" cellspacing="0" cellpadding="0" align="center" style="width:279px;" width="279" class="mso-table-width"><tr><td align="left" valign="top" style="width:279px;" width="290" class="mso-column-width"><![endif]-->
<!-- STACK COLUMN : BEGIN -->
<div class="no-stack-column no-stack-column-width" ee-percent-width="100">
<table style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="background-color: rgb(218, 222, 227);" dir="ltr" class="col-inner ee_dropzone" align="left"><table class="col-font-reset ee_element" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0">
<tbody>
<tr>
<td class="element-pad element-bord" valign="top" align="left"><div class="ee_editable">
<p style="margin: 0px; text-align: center; font-size: 17px; color: rgb(83, 169, 172);"><b>Text Button</b></p>
</div></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
<table class="ee_element ee_spacer col-font-reset" ee-type="element" style="table-layout: auto;" width="100%" cellspacing="0" cellpadding="0" border="0">
<tbody>
<tr>
<td style="font-size: 1px; line-height: 1px;"><img src="https://i.emlfiles.com/cmpimg/t/s.gif" style="display: block; width: 1px; height: 10px;" alt="" class="" width="1" border="0" height="10" /></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table></td>
</tr>
</tbody>
</table>
</div>
<!-- STACK COLUMN : END -->
<!--[if mso]></td></tr></table><![endif]--></td>
</tr>
</tbody>
</table>
答案 0 :(得分：0)
有几种方法可以实现这一目标：
方法1：我发现在电子邮件中实现反向堆栈的最简单方法是将两列编码为<th>标记，然后使用类样式编写标题单元格分别显示为table-footer和table-header。
<style>
@media only screen and (max-width: 580px) {
.w320{ width:320px; }
.thg{ display: table-header-group !important; width:100% !important; font-weight:normal;}
.tfg{ display: table-footer-group !important; width:100% !important; font-weight:normal;}
}
</style>
</head>
<body>
<div align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="w320" bgcolor="#333333">
<tr>
<th class="tfg" bgcolor="#CCCCCC">
<table width="100%" class="w320" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>left</td>
</tr>
</table>
</th>
<th class="thg" bgcolor="#999999">
<table width="100%" class="w320" border="0" cellspacing="0" cellpadding="0">
<tr>
<td>right</td>
</tr>
</table>
</th>
</tr>
</table>
</div>
方法2：如果将您的内容保存在阻止表中对您很重要，那么您可以使用以下方法。这些表在左侧之前用右表声明，并使用方向样式重新排序。此方法将要求VML在Outlook 2007,10和13上保持内联。
<style>
@media only screen and (max-width: 580px) {
.w320{ width:320px; }
}
</style>
</head>
<body>
<div align="center">
<table width="600" border="0" cellspacing="0" cellpadding="0" class="w320">
<tr>
<td style="direction:rtl">
<!--[if gte mso 9]>
<table border="0" cellpadding="0" cellspacing="0" style="direction:rtl">
<tr>
<td valign="top">
<![endif]-->
<table width="280" class="w320" border="0" cellspacing="0" cellpadding="0" style="display:inline" bgcolor="#CCCCCC">
<tr>
<td>right</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
<td valign="top">
<![endif]-->
<table width="280" class="w320" border="0" cellspacing="0" cellpadding="0" style="display:inline" bgcolor="#999999">
<tr>
<td>left</td>
</tr>
</table>
<!--[if gte mso 9]>
</td>
</tr>
</table>
<![endif]-->
</td>
</tr>
</table>
</div>
</body>