Question

我试图控制桌子内的图像，并在屏幕尺寸缩小时将它们保持在同一水平和相同宽度。这将用于电子邮件，因此我会避免像td width这样的全局样式，因此电子邮件中的其他元素不会受到影响。

我使用的代码是：

＆＃13;

@media only screen and (max-width:414px) {
      .mobile {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
      }
}

＆＃13;

<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
  <tr>
<td style="text-align: center;">
  <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
  <img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>

<td style="text-align: center;">
  <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
  <img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>

<td style="text-align: center;">
  <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
  <img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
  </tr>
</table>

＆＃13;

Answer 1

打破布局的部分是图像上方的文字。尝试将其移动到其单独行上的图像上方，给它一个高度，一切正常。

＆＃13;

	@media only screen and (max-width:414px) {
      .mobile {
        width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
      }
	}

＆＃13;

<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
  <tr>
    <td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4></td>
    <td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4></td>
    <td style="text-align: center; height: 20px;" height="20"><h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4></td>
  </tr>
  <tr>
<td width="33%" style="text-align: center;">
  
  <img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
</td>

<td width="33%" style="text-align: center;">
  
  <img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
</td>

<td width="33%" style="text-align: center;">
  
  <img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
</td>
  </tr>
</table>

＆＃13;

请告诉我这是否适合您。

Answer 2

只需将width: 33.33%;应用于表格单元格。

如果您希望图片与底部对齐，请将vertical-align: bottom;添加到单元格并将display: block应用于图片：

＆＃13;

td {
  width: 33.33%;
  vertical-align: bottom;
}

td img {
  display: block;
}

@media only screen and (max-width:414px) {
  .mobile {
    width: 100% !important;
    padding: 0 !important;
    margin: 0 !important;
  }
}

＆＃13;

<table border="" align="center" cellpadding="0" cellspacing="0" class="mobile" width="600">
  <tr>
    <td style="text-align: center;">
      <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> First title here </h4>
      <img src="http://via.placeholder.com/200x160/000" style="width: 100%;" />
    </td>

    <td style="text-align: center;">
      <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px"> SECOND TITLE HERE IN THE MIDDLE</h4>
      <img src="http://via.placeholder.com/200x160/00c" style="width: 100%;" />
    </td>

    <td style="text-align: center;">
      <h4 style="line-height: 1.2; margin-bottom: 15px; padding: 0 5px ">THEN THIRD TITLE HERE</h4>
      <img src="http://via.placeholder.com/200x160/c00" style="width: 100%;" />
    </td>
  </tr>
</table>

＆＃13;

如何使图像宽度相等

2 个答案: