Question

我正在尝试使用包含3列的部分创建HTML电子邮件。我希望列对齐，以便每个部分中使用的按钮和背景水平对齐，但我不确定如何在不同的电子邮件提供商中实现此目的。我想我看到如何使背景排成一行，但我不确定如何让3列中的按钮对齐。当它在Gmail中对齐时，它不会在Outlook中等等。

以下是我现在所拥有的： http://jsfiddle.net/UT7ZD/166/

＆＃13;

table {
  mso-table-lspace: 0pt;
  mso-table-rspace: 0pt;
  border-collapse: collapse;
}
table td div {
  height: 100%;
}
.ReadMsgBody {
  width: 100%;
  background-color: #ffffff;
}
.ExternalClass {
  width: 100%;
  background-color: #ffffff;
}
body {
  width: 100%;
  background-color: #ffffff;
  margin: 0;
  padding: 0;
  -webkit-font-smoothing: antialiased;
  font-family: Georgia, Times, serif
}
table {
  border-collapse: collapse;
}
@media only screen and (max-width: 640px) {
  body[yahoo] .deviceWidth {
    width: 440px!important;
    padding: 0;
  }
  body[yahoo] .center {
    text-align: center!important;
  }
}
@media only screen and (max-width: 479px) {
  body[yahoo] .deviceWidth {
    width: 280px!important;
    padding: 0;
  }
  body[yahoo] .center {
    text-align: center!important;
  }
}

＆＃13;

<table width="580" cellpadding="0" cellspacing="0" align="center" class="deviceWidth" bgcolor="#ffffff" style="margin:0 auto;">
  <td>
    <table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#ffede1">
      <td height="280px" style="padding:10px 10px 20px 10px">
        <div>
          <center>
            Lorem ipsum dolor sit amet, consectetur adipisicing euas magni quod error quidem incidunt eius qui consequatur ab asperiores optio similique ex reiciendis!
            <br>
            <br>
            <br>
            <br><a href="https://www.website.com" target="_blank" style="font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 12px; border-width: 8px 20px; border-style: solid; border-color: #1675a9; display: inline-block; background-color: #1675a9;"><b>Button 1 </b></a>
          </center>
        </div>
      </td>
    </table>
    <table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth">
      <td height="280px" style="padding:10px 10px 20px 10px">
        <div>
          <center>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ad omnis quae expedita ipsum nobis praesentium velit animi minus amet perspiciatis laboriosam similique debitis iste ratione nemo ea at corporis aliquam.
            <br>
            <br><a href="https://www.website.com" target="_blank" style="font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 12px; border-width: 8px 20px; border-style: solid; border-color: #1675a9; display: inline-block; background-color: #1675a9;"><b>Button 2</b></a>
          </center>
        </div>
      </td>
    </table>
    <table width="32%" align="left" cellpadding="0" cellspacing="0" class="deviceWidth" bgcolor="#ffede1">
      <td height="280px" style="padding:10px 10px 20px 10px">

        <div>
          <center>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ipsum dolferendis ullam consequatur.
            <br>
            <br><a href="https://www.website.com" target="_blank" style="font-size: 13px; font-family: Helvetica, Arial, sans-serif; color: #ffffff; text-decoration: none; border-radius: 12px; border-width: 8px 20px; border-style: solid; border-color: #1675a9; display: inline-block; background-color: #1675a9;"><b>Button 3</b></a>
          </center>
        </div>
      </td>
    </table>

＆＃13;

Answer 1

见http://jsfiddle.net/UT7ZD/168/

还学习HTML。您可以使用@media次查询，但不知道如何将简单的行或单元格添加到表格中您可能会发现this对此非常有用。

HTML（电子邮件）3列表：如何在列中对齐内容

1 个答案: