html - 响应式电子邮件模板定位问题

标签 html css responsive

我正在尝试创建一个响应式 HTML 电子邮件模板，但我在弄清楚如何让我的元素按照我想要的方式定位自己时遇到了一些麻烦。

在我下面的代码中，您会看到一些文本旁边有一张图片。

  1. 当屏幕变小(< 700 像素)时，我希望图像位于文本上方。不低于目前的水平。

  2. 当前标题部分不会在整行中居中。它保持更左对齐:

    <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用于电子邮件模板。在这种情况下，您可以将图像放在代码中的第一个位置，然后将其 float 到桌面的右侧。

关于html - 响应式电子邮件模板定位问题，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/49039255/

上一篇：html - 网页的背景图片未在 html 中显示

下一篇：javascript - 在您最好从数据库/Excel 中选择第一个列表中的元素后，如何填充第二个列表

相关文章：

javascript - 为什么垂直滚动卡在移动 View 中？

HTML/CSS - 链接不采用父 div 的宽度和高度，即使它们设置为 100%

html - 将一个 div 定位在另外 2 个 div 上

css - 基于容器高度的元素

javascript - 如何防止div :hover transitions from being disabled by javascript div style attributes alterations

html - 如何获取 HTML5 日历日期输入以显示弹出窗口？

php - 使用 session_start() 限制对页面的访问

css - 网格容器中 Chrome 和 Firefox 的溢出区别

html - Css 按钮 Sprite

css - 停止 css 动画@media max-width

©2024 IT工具网  联系我们