我正在尝试创建一个自适应的HTML电子邮件模板，但我在弄清楚如何让我的元素按照我想要的方式定位自己时遇到了一些麻烦。
在下面的代码中，您会看到我的某些文字旁边有一张图片。
当前标题部分不会居中于整行。它保持更左对齐：
<tr>
<td align="center">
<h3>Thank you for reserving your deal with us!</h3>
</td>
</tr>
我的水平行也是如此：
<tr>
<td>
<hr>
</td>
</tr>
我可以直观地看到tr占据整个宽度，但元素不会扩展以填充它们。那是为什么？
我的代码：
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
background-color: #e7e7e7;
}
#parentTable {
background-color: fff;
margin: auto;
border-bottom: 10px solid #007dc3;
-moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
td {
padding: 10px;
}
.row td {
padding: 10px 20px;
}
.para {
font-family: inherit;
line-height: 22px;
font-weight: 300;
color: #3b3b3b
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
-moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
.code {
background-color: #007dc3;
color: white;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
.code td {
padding: 10px;
text-align: center;
}
.view-deal-button {
color: fff;
background-color: #007dc3;
font-family: inherit;
font-size: 15px;
}
.vehilce-img {
position: relative;
}
.vehicle-img img {
width: 400px;
}
.contact {
font-size: 15px;
padding: 5px;
}
#trademark {
text-align: center;
padding: 8px;
font-size: 9px;
margin: auto;
color: #3b3b3b;
}
@media only screen and (max-width: 700px) {
.wrapper table {
width: 100%;
}
.wrapper .column {
width: 100%;
display: block;
}
}<table id="parentTable" width="100%" style="background: #fff">
<tr>
<td class="wrapper" width="600" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td align="center">
<h3>Thank you for reserving your deal with us!</h3>
</td>
</tr>
<tr>
<td class="column" width="600">
<table>
<tr class="code">
<td>
Your Personalised Code: <b>JNk1u7</b>
</td>
</tr>
<tr class="row">
<td class="para">
Please bring a printed copy of this email or simply note your personalized deal code so you have this information when you come in to pick up
</td>
</tr>
<tr class="row">
<td align="center">
<button class="view-deal-button btn" type='button'>View Your Deal</button>
</td>
</tr>
<tr class="row">
<td class="para">
Please feel free to be in touch, confirm any details of the deal, or ask any questions you may have. We look forward to meeting you soon!
</td>
</tr>
<tr>
<td class="para">
John Smith<br> General Sales Manager<br>
</td>
</tr>
</table>
</td>
<td class="column" width="300">
<table>
<tr>
<td align="center" class="vehicle-img">
<img src="https://092a1aab381dd581da25-7ddb065c39b8a73e05c6a8bc02fc8661.ssl.cf1.rackcdn.com//thumbnails/3HGGK5G43JM718575/9c127e805481e2ed1b5b17dde1621d92.jpg">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td>
<hr>
</td>
</tr>
</table>
</td>
</tr>
</table>
答案 0 :(得分：1)
我先说明你的第二点。 .wrapper中的表格有两列（class="column"），但第一行和最后一行只有一列，并且它们未设置为跨越两列。这会导致表格布局出现问题。以下是使用colspan：
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
background-color: #e7e7e7;
}
#parentTable {
background-color: fff;
margin: auto;
border-bottom: 10px solid #007dc3;
-moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
td {
padding: 10px;
}
.row td {
padding: 10px 20px;
}
.para {
font-family: inherit;
line-height: 22px;
font-weight: 300;
color: #3b3b3b
}
.btn {
display: inline-block;
padding: 6px 12px;
margin-bottom: 0;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
-moz-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
.code {
background-color: #007dc3;
color: white;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-moz-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
-webkit-box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
}
.code td {
padding: 10px;
text-align: center;
}
.view-deal-button {
color: fff;
background-color: #007dc3;
font-family: inherit;
font-size: 15px;
}
.vehilce-img {
position: relative;
}
.vehicle-img img {
width: 400px;
}
.contact {
font-size: 15px;
padding: 5px;
}
#trademark {
text-align: center;
padding: 8px;
font-size: 9px;
margin: auto;
color: #3b3b3b;
}
@media only screen and (max-width: 700px) {
.wrapper table {
width: 100%;
}
.wrapper .column {
width: 100%;
display: block;
}
}<table id="parentTable" width="100%" style="background: #fff">
<tr>
<td class="wrapper" width="600" align="center">
<table cellpadding="0" cellspacing="0">
<tr>
<td colspan="2" align="center">
<h3>Thank you for reserving your deal with us!</h3>
</td>
</tr>
<tr>
<td class="column" width="600">
<table>
<tr class="code">
<td>
Your Personalised Code: <b>JNk1u7</b>
</td>
</tr>
<tr class="row">
<td class="para">
Please bring a printed copy of this email or simply note your personalized deal code so you have this information when you come in to pick up
</td>
</tr>
<tr class="row">
<td align="center">
<button class="view-deal-button btn" type='button'>View Your Deal</button>
</td>
</tr>
<tr class="row">
<td class="para">
Please feel free to be in touch, confirm any details of the deal, or ask any questions you may have. We look forward to meeting you soon!
</td>
</tr>
<tr>
<td class="para">
John Smith<br> General Sales Manager<br>
</td>
</tr>
</table>
</td>
<td class="column" width="300">
<table>
<tr>
<td align="center" class="vehicle-img">
<img src="https://092a1aab381dd581da25-7ddb065c39b8a73e05c6a8bc02fc8661.ssl.cf1.rackcdn.com//thumbnails/3HGGK5G43JM718575/9c127e805481e2ed1b5b17dde1621d92.jpg">
</td>
</tr>
</table>
</td>
</tr>
<tr>
<td colspan="2">
<hr>
</td>
</tr>
</table>
</td>
</tr>
</table>
关于你的第一点，我建议重组使用flexible box layout，以便你可以利用flex-direction来反转首先放置图像的元素顺序。这是我的建议：
body {
font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
font-size: 14px;
background-color: #e7e7e7;
margin: 0;
}
#container {
display: flex;
flex-direction: row;
justify-content: space-between;
}
#container>div {
flex: 0 0 50%;
padding: 1em;
box-sizing: border-box;
text-align: center;
}
h3 {
text-align: center;
}
p {
text-align: left;
}
.responsive_image {
max-width: 100%;
}
.code {
background-color: #007dc3;
color: white;
box-shadow: 0px 0px 15px rgba(0, 0, 0, 0.2);
padding: 1em;
text-align: center;
}
.btn {
display: inline-block;
padding: 6px 12px;
font-size: 14px;
font-weight: 400;
line-height: 1.42857143;
text-align: center;
white-space: nowrap;
vertical-align: middle;
-ms-touch-action: manipulation;
touch-action: manipulation;
cursor: pointer;
-webkit-user-select: none;
-moz-user-select: none;
-ms-user-select: none;
user-select: none;
background-image: none;
border: 1px solid transparent;
border-radius: 3px;
box-shadow: 0px 3px 15px rgba(0, 0, 0, 0.2);
}
.view-deal-button {
color: fff;
background-color: #007dc3;
font-family: inherit;
font-size: 15px;
}
@media only screen and (max-width: 700px) {
#container {
flex-direction: column-reverse;
}
}<h3>Thank you for reserving your deal with us!</h3>
<div id="container">
<div>
<p class="code">Your Personalised Code: <b>JNk1u7</b></p>
<p>Please bring a printed copy of this email or simply note your personalized deal code so you have this information when you come in to pick up.</p>
<button class="view-deal-button btn" type='button'>View Your Deal</button>
<p>Please feel free to be in touch, confirm any details of the deal, or ask any questions you may have. We look forward to meeting you soon!</p>
<p>John Smith<br>General Sales Manager</p>
</div>
<div>
<img src="https://092a1aab381dd581da25-7ddb065c39b8a73e05c6a8bc02fc8661.ssl.cf1.rackcdn.com//thumbnails/3HGGK5G43JM718575/9c127e805481e2ed1b5b17dde1621d92.jpg" class="responsive_image">
</div>
</div>
我意识到这种方法may not be reliable适用于电子邮件模板。在这种情况下，您可以将图像放在代码中，然后将其浮动到桌面右侧。