Question

我试图将两个图像并排放置在一个表中，并且在第一个图像上具有以下行为：

它正对着桌子的底部，所以底部边框与桌子的底部边框重叠。
没有右边距或填充，因此它紧靠第二张图像（因此，第一张图像的右边界与第二张图像的左边界重叠）。

要解决我正在使用的第一件事，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，以便不更改display: table-cell元素的默认td。我还修复了您使用的标签中的错字。

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>

Answer 2

首先，您正在使用过时的属性，不建议这样做。此外，某些属性会尝试设置与CSS中的属性不同的值，这是禁止的。将它们全部替换为CSS属性。

第二，垂直对齐属性应该在img而不是td上。

然后两个图像之间的距离；第二张图像没有边框或空白，其td也没有，所以我不确定为什么您认为它们之间应该有一定的间距。我在td上放了一个左填充；您可以根据自己的需要进行更改。

最后，</img>是不必要的；甚至不允许，因为<img>是一个void元素。如果需要，可以在<img>标记后加上斜线。

table {
  border: 1px solid black;
  width: 666px;     /* css replacement for width attr */
  border-spacing:0; /* css replacement for cellspacing attr */
}

td {
  padding:0;        /* css replacement for cellpadding attr */
}

.benderImg {
  border: 2px solid green;
  padding-right: 0px;
  margin-right: 0px;
}

.benderImg > img {
  border: 1px solid red;
  vertical-align:bottom;
}

.benderImg + td {
  padding-left:5px;
}

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

Answer 3

对于第二个问题，我仅通过在第一张图像的td上使用import Link from 'next/link' export default () => ( <div>Hello World. <Link href='/about'><a>About</a></Link></div> )来解决它。第一个问题已在第一张图片上用align="right"修复。

表格中的图片未按预期放置？

3 个答案: