我正在尝试创建一个响应式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>View on JSFiddle
最佳答案
我先谈您的第二点。 .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用于电子邮件模板。在这种情况下，您可以将图像放在代码的最前面，然后将其浮动到桌面上的右侧。