【发布时间】：2018-03-01 07:18:55
【问题描述】：
我正在尝试创建一个响应式 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>【问题讨论】：
标签： html css responsive