我正在尝试为时事通讯构建两栏布局，但出于某种原因，我的栏有时会垂直居中对齐？
在某些版本的 outlook 中可以使用，但在其他版本中不能使用？
知道如何解决这个问题吗？
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<meta content="telephone=no" name="format-detection" />
<title>EMAIL NEWSLETTER</title>
<style type="text/css">
body {
-webkit-text-size-adjust: 100%!important;
-ms-text-size-adjust: 100%!important;
-webkit-font-smoothing: antialiased!important
}
img {
border: 0!important;
outline: none!important;
}
p {
margin: 0!important;
padding: 0!important;
}
table {
border-collapse: collapse;
mso-table-lspace: 0;
mso-table-rspace: 0;
}
td, a, span {
border-collapse: collapse;
mso-line-height-rule: exactly;
}
.ExternalClass * {
line-height: 100%;
}
span.MsoHyperlink {
mso-style-priority: 99;
color: inherit
}
span.MsoHyperlinkFollowed {
mso-style-priority: 99;
color: inherit;
}
.em_white a {
text-decoration: none;
color: #ffffff;
}
.em_white_und a {
text-decoration: underline;
color: #ffffff;
}
.em_orange a {
text-decoration: none;
color: #EC8026;
}
.em_orange1 a {
text-decoration: none;
color: #e44c16;
}
.em_marun a {
text-decoration: none;
color: #1e8faa;
}
.em_marun1 a {
text-decoration: none;
color: #1E8FAA;
}
.em_yellow a {
text-decoration: none;
color: #f5ebd7;
}
@media screen and (min-width:601px) {
.container {
width: 600px!important;
}
}
</style>
<!--[if (gte mso 9)|(IE)]>
<style type="text/css">table{border-collapse:collapse!important!important}</style>
<![endif]-->
</head>
<body style="margin:0;padding:0">
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center"><table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tr>
<td><table style="max-width:600px" width="100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td><!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#1E8FAA">
<tr>
<td bgcolor="#1E8FAA" valign="top" style="border-spacing:0;Margin:0 auto;width:100%;max-width:582px"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td valign="top"><!--[if (gte mso 9)|(IE)]><table width="582" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table width="100%" border="0" cellspacing="0" cellpadding="0" style="max-width:582px" align="center">
<tr>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="20" style="line-height:0px;font-size:0px"> </td>
</tr>
<tr>
<td class="two-column" valign="top" style="text-align:left;font-size:0" dir="rtl"><!--[if (gte mso 9)|(IE)]><table width="100%" dir="rtl"><tr><td width="188"><![endif]-->
<div class="column" style="width:100%;max-width:188px;display:inline-block;vertical-align:top;text-align:left" dir="ltr">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td valign="top" class="em_hide"><table width="100%" border="0" cellspacing="0" style="max-width:198px;" cellpadding="0" align="right" class="column">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0" align="left">
<tr>
<td><table style="max-width:198px;" border="0" cellspacing="0" cellpadding="0" align="left" class="column">
<tr>
<td width="10"> </td>
<td mc:edit="text_2" class="em_center" height="42" valign="middle" align="left" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:11px; line-height:15px; color:#ffffff;background-color:#1E8FAA;"><multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:11px; line-height:15px; color:#ffffff;background-color:#1E8FAA;"><span class="em_white">Email not displaying properly? </span></multiline>
<br />
<span class="em_white_und">
<webversion style="text-decoration:underline;color:#ffffff;"><span class="em_white_und" style="text-decoration:underline;color:#ffffff;">View it in your browser.</span></webversion>
</span></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px"> </td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="384"><![endif]-->
<div class="column" style="width:100%;max-width:384px;display:inline-block;vertical-align:top;text-align:left" dir="ltr">
<table width="100%" style="max-width:384px" cellpadding="0" align="center" cellspacing="0" border="0">
<tr>
<td><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10" class="em_hide"> </td>
<td width="152" align="center" valign="top"><a href="http://www.website.org/" target="_blank" style="text-decoration:none"><img editable="true" src="/images/logo.jpg" width="152" alt="logo" style="display:block;font-family:Georgia, 'Times New Roman', Times, serif;font-size:14px;color:#ffffff;font-weight:bold;line-height:20px;max-width:152px;" border="0" /></a></td>
<td width="222" class="em_hide"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="20" style="line-height:1px;font-size:1px"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center" valign="top"><repeater>
<layout label="Gallery">
<table style="width:100%;table-layout:fixed;-webkit-text-size-adjust:100%;-ms-text-size-adjust:100%" align="center" cellpadding="0" cellspacing="0" border="0">
<tr>
<td align="center"><table class="container" align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;">
<tr>
<td><table style="max-width:600px" width="100%" align="center" cellpadding="0" cellspacing="0" border="0" bgcolor="#ffffff">
<tr>
<td><!--[if (gte mso 9)|(IE)]><table width="600" align="center" cellpadding="0" cellspacing="0" border="0"><tr><td><![endif]-->
<table align="center" cellpadding="0" cellspacing="0" border="0" style="border-spacing:0;Margin:0 auto;width:100%;max-width:600px;" bgcolor="#ffffff">
<tr>
<td width="5" class="em_hide"> </td>
<td class="two-column" valign="top" style="text-align:center;font-size:0"><!--[if (gte mso 9)|(IE)]><table width="100%"><tr><td width="295"><![endif]-->
<div class="column" style="width:100%;max-width:295px;display:inline-block;vertical-align:top;text-align:center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td width="5" class="em_hide"> </td>
<td align="center" valign="top" class="em_side_space"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><a href="#" target="_blank" style="text-decoration:none;"><img editable="true" src="http://placehold.it/350x250" width="285" alt="GALLERY ARTICLE 1" style="display:block;font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:15px; line-height:30px; color:#000000;font-weight:bold;max-width:285px;" border="0" class="em_full_width" /></a></td>
</tr>
<tr>
<td valign="top" bgcolor="#1E8FAA" style="background-color:#1E8FAA;"><table width="100%" style="max-width:285px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"> </td>
<td valign="top"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;"><span class="em_yellow">
<multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</multiline>
</span></td>
</tr>
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="18" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td><td width="295"><![endif]-->
<div class="column" style="width:100%;max-width:295px;display:inline-block;vertical-align:top;text-align:center">
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="column">
<tr>
<td width="5" class="em_hide"> </td>
<td align="center" valign="top" class="em_side_space"><table width="100%" border="0" cellspacing="0" cellpadding="0" align="center">
<tr>
<td align="center" valign="top"><a href="#" target="_blank" style="text-decoration:none;"><img editable="true" src="http://placehold.it/350x250" width="285" alt="GALLERY ARTICLE 2" style="display:block;font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:15px; line-height:30px; color:#000000;font-weight:bold;max-width:285px;" border="0" class="em_full_width" /></a></td>
</tr>
<tr>
<td valign="top" bgcolor="#1E8FAA" style="background-color:#1E8FAA;"><table width="100%" border="0" cellspacing="0" cellpadding="0">
<tr>
<td width="10"> </td>
<td valign="top"><table width="100%" style="max-width:285px;" border="0" cellspacing="0" cellpadding="0">
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
<tr>
<td align="left" valign="top" style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;"><span class="em_yellow">
<multiline style="font-family:NewsGothicMT, 'Century Gothic', Arial, sans-serif;font-size:13px; line-height:17px; color:#f5ebd7;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Lorem ipsum dolor sit amet, consectetur adipiscing elit.</multiline>
</span></td>
</tr>
<tr>
<td height="15" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="10"> </td>
</tr>
</table></td>
</tr>
<tr>
<td height="18" style="line-height:1px;font-size:1px;"> </td>
</tr>
</table></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
</div>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
<td width="5" class="em_hide"> </td>
</tr>
</table>
<!--[if (gte mso 9)|(IE)]></td></tr></table><![endif]--></td>
</tr>
</table></td>
</tr>
</table></td>
</tr>
</table>
</layout>
</repeater></td>
</tr>
</table>
</body>
</html>最佳答案
通过为元素设置高度，您尝试对其进行 valign，它应该可以工作。
关于HTML 电子邮件两列问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/35757450/