html - 表格中的图像未按预期放置？

Question

我试图将两张图片并排放在一个表格中，并在第一张图片上出现以下行为:

1. 让它正好靠在表格的底部，因此底部边框与表格的底部边框重叠。
2. 没有右边距或填充，因此它紧靠第二张图片(因此第一张图片的右边框与第二张图片的左边框重叠)。

为了解决第一个问题，我使用了 valign="bottom" 但这似乎并不完全有效。

为了解决第二个问题，我使用了 padding-right:0px; margin-right:0px; 但这也不起作用。

谁能帮我实现我想要的行为？请注意，我使用的是表格，因为我在该表格中还有其他内容，我只是将它们取出来简化问题。

table {
  border: 1px solid black;
}

.benderImg {
  border: 2px solid green;
  padding-right: 0px;
  margin-right: 0px;
}

.benderImg > img {
  border: 1px solid red;
}

<table width="666" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="benderImg" valign="bottom">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V"></img>
    <td>
    <td valign="bottom">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg"></img>
    <td>
  </tr>
</table>

Answer 1

您可以在下面看到两个适合您的技巧。首先，我将 td 设为具有两个对齐方式的 display: flex。 ;).在第二个中，我在 div 元素内部使用了 flex，因此不更改 td 元素的默认 display: table-cell 。我还修复了您使用的标签中的拼写错误。

table {
  border: 1px solid black;
}

.benderImg {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  border: 2px solid green;
  padding-right: 0px;
  margin-right: 0px;
}

.benderImg>img {
  border: 1px solid red;
}

<table width="666" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="benderImg">
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" />
    </td>
    <td>
      <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" />
    </td>
  </tr>
</table>

table {
  border: 1px solid black;
}

.benderImg {
  border: 2px solid green;
  padding-right: 0px;
  margin-right: 0px;
}

.benderImg>div>img {
  border: 1px solid red;
}

.benderImg > div {
  display: flex;
  align-items: flex-end;
  justify-content: flex-end;
  height: 100%;
  width: 100%;
}

<table width="666" border="0" cellspacing="0" cellpadding="0">
  <tr>
    <td class="benderImg">
    <div>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcS_WR2Eqmcd2zXlhYpDN1oMRmystiCn-ECZfLgM5JuJg58Enn7V" />
    </div>
      <td>
        <img src="https://encrypted-tbn0.gstatic.com/images?q=tbn:ANd9GcRctutHJ3tMB4vgZ9bEwX8VACeXgAvbGX09iUht_h8Ci3-OSAtBqg" />
      </td>
  </tr>
</table>