此问题特定于电子邮件HTML，必须在所有常见的电子邮件客户端中使用。
我有一个三列布局，当在移动设备上查看时，它变成了一个堆叠的单列布局。
在桌面上，客户端希望每列的最后一个元素（按钮）垂直对齐。这意味着所有按钮的高度均应相同，无论其上方的文字长度如何。
因为这是一封电子邮件，所以我使用的CSS受限制。例如，我不能使用位置
我正在创建一个经常使用的模板，这意味着无论所用文本的长度如何，它都必须具有所描述的外观-并且无需任何人每次都更改CSS。
我非常确定，因为这必须是响应性的，这意味着我必须创建独立的表，没有很好的方法来执行此操作，但是我很想听听想法。这是我想出的，以及为什么不合适：
为台式机和移动设备制作两个完全独立的表，然后分别隐藏它们。这样做很容易，但是对于必须在两个地方输入相同内容的要求，该机构不接受。
为包含文本段落的单元格指定最小高度。这在许多电子邮件客户端中根本不起作用，而且，由于我不知道每次输入的文本长度有多长，因此我无法真正选择高度。即使客户注意使所有三篇文章的长度都相同，我也可能内置了多余的空格。
给单元格一个固定的高度，并告诉客户它们不能超过一定数量的字符。这是我能想到的最好的方法，我只希望他们不要在该字符长度以下。
这是我正在使用的代码：https://codepen.io/Nomi1138/pen/WLqapN
<!doctype html>
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:o="urn:schemas-microsoft-com:office:office" xmlns:v="urn:schemas-microsoft-com:vml">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<meta name="format-detection" content="telephone=no">
<meta name="format-detection" content="date=no">
<meta name="format-detection" content="address=no">
<meta name="format-detection" content="email=no">
<link href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900" rel="stylesheet">
<title></title>
<!--[if gte mso 9]><xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml><![endif]-->
<style type="text/css">
table { margin:0; padding:0; border-spacing:0; border:none; border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0; }
td { font-family: Arial, Helvetica, 'sans-serif'; mso-line-height-rule:exactly; }
:link { color:#000000; }
:visited { color:#000000; }
.no-link-000000, .no-link-000000 a {
color:#000000!important;
text-decoration:none!important;
cursor:text!important; }
.no-link-888888, .no-link-888888 a {
color:#888888!important;
text-decoration:none!important;
cursor:text!important; }
span.preheader { display: none !important; color:#ffffff!important;}
@media handheld, screen and (max-width: 430px) {
.m-display-block { display:block!important; }
.m-display-none { display:none!important; }
.m-display-inline { display:inline!important; }
.m-float-none { float:none!important; }
.m-min-width-320px { min-width:320px!important; }
.m-min-height-auto { min-height: auto!important; }
.m-height-auto { height: auto!important; }
.m-width-320px { width:320px!important; }
.m-width-300px { width:300px!important; }
.m-width-290px { width:290px!important; }
.m-width-285px { width:285px!important; }
.m-width-283px { width:283px!important; }
.m-width-280px { width:280px!important; }
.m-width-272px { width:272px!important; }
.m-width-260px { width:260px!important; }
.m-width-242px { width:242px!important; }
.m-width-232px { width:232px!important; }
.m-width-229px { width:229px!important; }
.m-width-227px { width:227px!important; }
.m-width-210px { width:210px!important; }
.m-width-209px { width:209px!important; }
.m-width-200px { width:200px!important; }
.m-width-190px { width:190px!important; }
.m-width-180px { width:180px!important; }
.m-width-175px { width:175px!important; }
.m-width-151px { width:151px!important; }
.m-width-110px { width:110px!important; }
.m-width-71px { width:71px!important; }
.m-width-60px { width:60px!important; }
.m-width-50px { width:59px!important; }
.m-width-25px{ width:25px!important; }
.m-width-20px{ width:20px!important; }
.m-width-15px{ width:15px!important; }
.m-width-10px{ width:10px!important; }
.m-width-0 {width:0px!important;}
.m-height-322px {height:322px!important;}
.m-height-318px {height:318px!important;}
.m-height-290px {height:290px!important;}
.m-height-251px {height:251px!important;}
.m-height-170px {height:170px!important;}
.m-height-151px {height:151px!important;}
.m-height-48px {height:48px!important;}
.m-height-40px {height:40px!important;}
.m-height-29px {height:29px!important;}
.m-height-20px {height:20px!important;}
.m-height-auto {height:auto:!important;}
.m-padding-0-0-0-0{padding: 0px 0px 0px 0px!important;}
.m-padding-top-70px { padding-top:70px!important; }
.m-padding-top-45px { padding-top:45px!important; }
.m-padding-top-25px { padding-top:25px!important; }
.m-padding-top-20px { padding-top:20px!important; }
.m-padding-top-15px { padding-top:15px!important; }
.m-padding-top-13px { padding-top:13px!important; }
.m-padding-top-10px { padding-top:10px!important; }
.m-padding-top-8px { padding-top:8px!important; }
.m-padding-top-5px { padding-top:5px!important; }
.m-padding-top-0 { padding-top:0!important; }
.m-padding-right-50px { padding-right:50px!important; }
.m-padding-right-40px { padding-right:40px!important; }
.m-padding-right-30px { padding-right:30px!important; }
.m-padding-right-25px { padding-right:25px!important; }
.m-padding-right-20px { padding-right:20px!important; }
.m-padding-right-15px { padding-right:15px!important; }
.m-padding-right-10px { padding-right:10px!important; }
.m-padding-right-5px { padding-right:5px!important; }
.m-padding-right-0 { padding-right:0!important; }
.m-padding-bottom-70px { padding-bottom:70px!important; }
.m-padding-bottom-40px { padding-bottom:40px!important; }
.m-padding-bottom-30px { padding-bottom:30px!important; }
.m-padding-bottom-25px { padding-bottom:25px!important; }
.m-padding-bottom-20px { padding-bottom:20px!important; }
.m-padding-bottom-15px { padding-bottom:15px!important; }
.m-padding-bottom-13px { padding-bottom:13px!important; }
.m-padding-bottom-10px { padding-bottom:10px!important; }
.m-padding-bottom-8px { padding-bottom:8px!important; }
.m-padding-bottom-5px { padding-bottom:5px!important; }
.m-padding-bottom-0 { padding-bottom:0!important; }
.m-padding-left-50px { padding-left:50px!important; }
.m-padding-left-45px { padding-left:45px!important; }
.m-padding-left-42px { padding-left:42px!important; }
.m-padding-left-40px { padding-left:40px!important; }
.m-padding-left-30px { padding-left:30px!important; }
.m-padding-left-25px { padding-left:25px!important; }
.m-padding-left-20px { padding-left:20px!important; }
.m-padding-left-15px { padding-left:15px!important; }
.m-padding-left-13px { padding-left:13px!important; }
.m-padding-left-10px { padding-left:10px!important; }
.m-padding-left-5px { padding-left:5px!important; }
.m-padding-left-0 { padding-left:0!important; }
.m-font-size-40px { font-size:40px!important; }
.m-font-size-32px { font-size:32px!important; }
.m-font-size-30px { font-size:30px!important; }
.m-font-size-24px { font-size:24px!important; }
.m-font-size-18px { font-size:18px!important; }
.m-font-size-16px { font-size:16px!important; }
.m-font-size-15px { font-size:15px!important; }
.m-font-size-14px { font-size:14px!important; }
.m-font-size-12px { font-size:12px!important; }
.m-font-size-10px { font-size:10px!important; }
.m-font-weight-bold {font-weight: bold!important;}
.m-line-height-40px { line-height:40px!important;}
.m-line-height-32px { line-height:32px!important;}
.m-line-height-30px { line-height:30px!important;}
.m-line-height-24px { line-height:24px!important;}
.m-line-height-20px { line-height:20px!important;}
.m-line-height-16px { line-height:16px!important;}
.m-textalign-left {text-align:left!important;}
.m-textalign-center {text-align:center!important;}
.m-textalign-left {text-align:left!important;}
.m-border-top-00827b-6px {border-top: 6px solid #00827b!important;}
.m-border-bottom-169d99-11px {border-bottom: 11px solid #169d99!important;}
.m-border-top-169d99-11px {border-top: 11px solid #169d99!important;}
.m-border-bottom-00827b-11px {border-bottom: 11px solid #00827b!important;}
.m-border-top-00827b-11px {border-top: 11px solid #00827b!important;}
.m-border-top-ffffff-1px {border-top: 1px solid #ffffff!important;}
.m-border-top-23a29f-1px {border-top: 1px solid #23a29f!important;}
.m-border-0 {border:none!important;}
.m-border-radius-40px { border-radius:55px!important; }
.m-bgcolor-169d99 { background-color:#169d99!important;}
}
</style>
<!--[if gte mso 9]>
<xml>
<o:OfficeDocumentSettings>
<o:AllowPNG/>
<o:PixelsPerInch>96</o:PixelsPerInch>
</o:OfficeDocumentSettings>
</xml>
<style type="text/css">
sup { font-size:78%!important; line-height:78%!important; }
sup small { font-size:100% !important; }
</style>
<![endif]-->
<!--[if IE]>
<style type="text/css">
sup { font-size:78%!important; line-height:78%!important; }
sup small { font-size:100% !important; }
</style>
<![endif]-->
<!--[if mso]>
<style type="text/css">
body, table, td, p, a, span {font-family: Arial, Helvetica, 'sans-serif'!important;}
</style>
<![endif]-->
</head>
<body style="margin:0; padding:0; -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%;">
<custom name="opencounter" type="tracking" />
<span class="preheader" style="line-height:0; height:0px; font-size:0px; color:#ffffff; display:none;">
<!--[if !mso 9]><!-->
<!--<![endif]-->
</span>
<table cellpadding="0" cellspacing="0" border="0" bgcolor="#d4d8dc" style="width:100%; background-color:#d4d8dc;">
<tr>
<td align="center" style="display:none; font-size:1px; color:#feffff; line-height:1px; max-height:0px; max-width:0px; opacity:0; overflow:hidden; width: 1101px;">
</td>
</tr>
<tr>
<td align="center" valign="top" style="width: 1101px;">
<table border="0" cellpadding="0" cellspacing="0" style="width:430px; min-width:430px;" class="m-width-320px m-min-width-320px">
<tr>
<td align="center" valign="top" bgcolor="#ffffff">
<!-- start three column layout, turns into one column on mobile -->
<table border="0" cellpadding="0" cellspacing="0" style="width:430px;" class="m-width-320px">
<tr>
<td align="left" valign="top">
<!-- Start: Outer container table with padding and separator -->
<table border="0" cellpadding="0" cellspacing="0" align="center" class="m-width-320px" style="width:430px; border-spacing:0; border-collapse:collapse; mso-table-lspace:0; mso-table-rspace:0;">
<tr>
<td align="center" valign="top" style="padding-top:25px;" class="m-padding-top-15px">
<table border="0" cellpadding="0" cellspacing="0" align="center" class="m-width-320px" style="width:430px;border-spacing:0;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td width="20" class="m-display-none" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"></td>
<td valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
<!-- Start: Column 1 -->
<table cellpadding="0" cellspacing="0" border="0" align="left" class="m-width-320px" style="width:123px;border-spacing:0;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td align="left" valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;" class="m-padding-left-20px m-padding-right-15px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td align="center" valign="top" style="width:123px;" class="m-display-none m-width-0">
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" style="padding: 0px 0 15px 0px; font-family: 'Source Sans Pro', Arial, Helvetica, 'sans-serif'; font-size:10px; line-height:15px; color:#231f20; height: 280px" class="m-font-size-14px m-line-height-20px m-padding-bottom-25px m-height-auto">
Sed ut perspiciatis unde omnis iste natus error sit voluptatem ipsa quae ab illo inve ntore veritatis et quasi archite cto beatae vitae dicta sunt expl icabo nemo enim ipsam. vo lupt atem quia voluptas sit unt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" style="padding: 0 0 20px 0;" class="m-padding-left-45px">
<!-- Button : BEGIN -->
<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="25" align="center" style="background: #6e1448; text-align: center; height: 25px; border-radius:25px; padding: 0 3px 0 3px;" class="m-height-40px m-border-radius-40px m-width-190px">
<a href="#" target="_blank" style="padding: 0 10px 0 10px; background: #6e1448; font-family: 'Source Sans Pro', Arial, Helvetica, 'sans-serif'; font-size: 8px; line-height: 16px; text-align: center; text-decoration: none; display: block; font-weight: bold;" class="m-width-180px m-padding-right-0 m-padding-left-0 m-font-size-14px">
<span style="color:#ffffff;">CALL TO ACTION</span> <span style="font-size:12px; color:#ffffff;" class="m-font-size-18px">›</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End: Column 1 -->
<!--[if gte mso 9]></td><td valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"><![endif]-->
<!-- Start: Separator table -->
<table border="0" cellspacing="0" cellpadding="0" align="left" class="m-display-none" style="width:11px;border-spacing:0;border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="m-display-none" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"> </td>
</tr>
</table>
<!-- End: Separator table -->
<!--[if gte mso 9]></td><td valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"><![endif]-->
<!-- Start: Column 2 -->
<table cellpadding="0" cellspacing="0" border="0" align="left" class="m-width-320px" style="width:123px;border-spacing:0; border-collapse:collapse; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td align="left" valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;" class="m-padding-left-20px m-padding-right-15px">
<table border="0" cellpadding="0" cellspacing="0">
<!--[if !mso 9]><!-->
<tr>
<td align="center" valign="top" style="width:0px; height: 0px; padding:0;" class="m-padding-top-20px m-width-285px">
<img src="http://image.s6.exacttarget.com/lib/fe9712727265077e77/m/4/f3006535-cdbe-459f-8609-67e2ec043448.png" alt="" border="0" style="display: none; border: none; height:0px; font-family: Arial, Helvetica, 'sans-serif'; font-size:10px; color:#999999;" class="m-display-block m-height-151px m-width-151px">
</td>
</tr>
<!--<![endif]-->
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" style="padding: 0px 0 15px 0px; font-family: 'Source Sans Pro', Arial, Helvetica, 'sans-serif'; font-size:10px; line-height:15px; color:#231f20; height: 280px" class="m-font-size-14px m-line-height-20px m-padding-bottom-25px m-height-auto">
Sed ut perspiciatis unde omnis iste natus errosantium doloremque lau dantium, totam rem aperiam, eaque ipsa quae ab illo inve ntore veritatis et quasi archite cto beatae vitae dicta sunt expl icabo nemo enim ipsam. vo lupt atem quia voluptas sit unt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" style="padding: 0 0 20px 0;" class="m-padding-left-45px">
<!-- Button : BEGIN -->
<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="25" align="center" style="background: #6e1448; text-align: center; height: 25px; border-radius:25px; padding: 0 3px 0 3px;" class="m-height-40px m-border-radius-40px m-width-190px">
<a href="#" target="_blank" style="padding: 0 10px 0 10px; background: #6e1448; font-family: 'Source Sans Pro', Arial, Helvetica, 'sans-serif'; font-size: 8px; line-height: 16px; text-align: center; text-decoration: none; display: block; font-weight: bold;" class="m-width-180px m-padding-right-0 m-padding-left-0 m-font-size-14px">
<span style="color:#ffffff;">CALL TO ACTION</span> <span style="font-size:12px; color:#ffffff;" class="m-font-size-18px">›</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End: Column 2 -->
<!--[if gte mso 9]></td><td valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"><![endif]-->
<!-- Start: Separator table -->
<table border="0" cellspacing="0" cellpadding="0" align="left" class="m-display-none" style="width:11px;border-spacing:0; border-collapse:collapse; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td class="m-display-none" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"> </td>
</tr>
</table>
<!-- End: Separator table -->
<!--[if gte mso 9]></td><td valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"><![endif]-->
<!-- Start: Column 3 -->
<table cellpadding="0" cellspacing="0" border="0" align="left" class="m-width-320px" style="width:123px;border-spacing:0; border-collapse:collapse; mso-table-lspace:0;mso-table-rspace:0;">
<tr>
<td align="left" valign="top" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;" class="m-padding-left-20px m-padding-right-15px">
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" style="padding: 0px 0 15px 0px; font-family: 'Source Sans Pro', Arial, Helvetica, 'sans-serif'; font-size:10px; line-height:15px; color:#231f20; height: 280px;" class="m-font-size-14px m-line-height-20px m-padding-bottom-25px m-height-auto">
Sed ut perspiciatis unde omnis iste illo inve ntore veritatis et quasi archite cto beatae vitae dicta sunt expl icabo nemo enim ipsam. vo lupt atem quia voluptas sit unt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima
</td>
</tr>
</table>
<table border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top" align="left" style="padding: 0 0 20px 0;" class="m-padding-left-45px">
<!-- Button : BEGIN -->
<table role="presentation" align="center" cellspacing="0" cellpadding="0" border="0">
<tr>
<td height="25" align="center" style="background: #6e1448; text-align: center; height: 25px; border-radius:25px; padding: 0 3px 0 3px;" class="m-height-40px m-border-radius-40px m-width-190px">
<a href="#" target="_blank" style="padding: 0 10px 0 10px; background: #6e1448; font-family: 'Source Sans Pro', Arial, Helvetica, 'sans-serif'; font-size: 8px; line-height: 16px; text-align: center; text-decoration: none; display: block; font-weight: bold;" class="m-width-180px m-padding-right-0 m-padding-left-0 m-font-size-14px">
<span style="color:#ffffff;">CALL TO ACTION</span> <span style="font-size:12px; color:#ffffff;" class="m-font-size-18px">›</span>
</a>
</td>
</tr>
</table>
<!-- Button : END -->
</td>
</tr>
</table>
</td>
</tr>
</table>
<!-- End: Column 3 -->
</td>
<td width="19" class="m-display-none" style="border-collapse:collapse;mso-table-lspace:0;mso-table-rspace:0;"></td>
</tr>
</table>
<!-- End: Inner content container table -->
</td>
</tr>
</table>
<!-- End: Outer container table with padding and separator -->
</td>
</tr>
</table>
<!-- end three column layout, turns into one column on mobile -->
</td>
</tr>
</table>
</td>
</tr>
</table>
</body>
</html>
上面的代码有效，但仅在文本块不太长或太短时才满足客户端要求。